# nuxt-base-cli

**Repository Path**: xxpcode/nuxt-base-cli

## Basic Information

- **Project Name**: nuxt-base-cli
- **Description**: 模块：nuxt、vue、vue-router、vuex、elementUI、Font Awesome、Animate.css、axios
实践新语法：async-await
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-11-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# nuxt搭建和配置多页架构

> 模块：nuxt、vue、vue-router、vuex、elementUI、Font Awesome、Animate.css、axios 
> 实践新语法：async-await

## 总结

> 说说，搭建一个架构需要做的基础事项，剩下的就是对代码和组件
> 搭建架构新体会：🤔

* 🤗UI框架的选择，在快速开发阶段，最重要的就是减少常用组件的开发（在不需要定制化的时候，需要定制的自己封装）
* 😎框架的责任就是把以前人工做的事情逐渐变成自动化，使得开发人员把精力和时间放在最重要的位置上😋
* 😪全局icon的使用，这里使用`Font Awesome`减少图片的使用；当然还有很多是没有的这里可以先使用svg进行开发，后续使用`iconfont`和`svg`转字体进行替换
* 😛使用`animate.css`增强页面的交互效果，一些小效果直接使用全局样式封装即可
* 🤠大面积使用组件：把每个小模块单独封装一个组件，这样管理、扩展、二次开发都是非常方便的，这也就是为什么说现在的三大框架解决了项目冗余和无法维护的问题
* 🤡大量组件面临的就是组件和组件之间的响应问题：这里直接使用`vuex`来操作
* 😈`vuex`带来的问题是，`form`表单的处理，也就是`v-model`的优势已经无法使用了，这里直接使用双向数据绑定的原理`get and set`方法进行处理
* 🤓`vuex`同步数据使用`mutation`操作，异步数据先使用`action`后再用`mutation`操作；具体操作在下面和实际例子中都有，并且对基础方法进行了封装，使得代码数量更加的少
* 👻`vue-router`，使用它就忘掉`<a/>`标签，有两种使用方法，一种是`html`使用，一种是`js`使用，具体下面有详细介绍
* 👽前端开发，跨域问题不可避免，这里使用`@nuxtjs/axios and  @nuxtjs/proxy`来进行配置
* 😺请求方法的封装，减少公共部分的代码量，对错误进行统一处理和捕捉
* 😸之前一直使用`Promise`，开发中的感受就是这简直是神迹，在使用`async-await`这就是超级神迹😍
* 😤剩下的就没有这么好玩了，开始堆码，在堆码的过程中为了给自己增加点乐趣😭，多进行不同的尝试，开始我的`react`之路，期待兴奋开心，我先健个身👨‍🎓

**记得之前在一灯**

* 当时不明白，佳哥为什么不教开发整套网站和页面，现在才终于明白，那有什么乐趣✊，闭着眼睛敲就行了👨‍👧‍👧🙏

## Build Setup

``` bash
# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate
```

## 集成内容

* [`elementUI`减少基础组件的开发，提高效率](http://element.eleme.io/#/zh-CN)
* [`Font Awesome`丰富网站`icon`](http://fontawesome.dashgame.com/)
* [`Animate.css`增强交互效果](https://github.com/daneden/animate.css)

## 网页`z-index`即堆叠层级说明

* 页面内容设置为9即9一下
* 基本弹框设置为99

## elementUI继承

* 在`plugins`文件夹下创建`element-ui.js`文件，内容为：

```
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element);
```

* `nuxt.config.js`文件添加

```
build: {
  // add
  vendor: ['element-ui'],
},
css: [
// add
  {src:'element-ui/lib/theme-chalk/index.css'},
],
plugins: [{src:'~plugins/element-ui', ssr: true}],
```

## nuxt中vue-router

> 使用方法还是一样的没有变化
> 例子：

**html导航**

```
<nuxt-link to="/test">test</nuxt-link>
```

**js导航**

```
this.$router.push({
  path:'/user',
  query:{
    age:18
  }
})
```

**路由传参**

> 注意：这种方法不能被seo到
> 而且当刷新页面的时候，相关数据会被清空

**定义**

```
<nuxt-link :to="{name:'login',params:{userId:'signin'}}"><div class="nav_item sign_item">登录</div></nuxt-link>
```

**使用**

```
<h1>{{$route.params.userId}}</h1>
```

## 请求数据

* [使用@nuxtjs/axios模块](https://axios.nuxtjs.org/)
* 在`nuxt.config.js`中进行配置：

```
module.exports = {
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy',
    ],
    proxy: {
        '/api': {
            target: 'http://api.douban.com',
            pathRewrite: { '^/api/': '' }
        }
    }

}
```

### 组件局部引用和使用方法（全局使用请看下面全局配置）

**引入**

```
import axios from 'axios'
```

**使用**

```
methods:{
  async requestData(){
    const url = 'http://api.douban.com/v2/movie/top250?start=1&count=10';
    let { data } = await axios.get('api/v2/movie/top250?start=1&count=10')
    console.log(data)
    return { users: data.data }
  },
},
```

## 更改域名和端口

* 方法多种，这里使用`package.json`中进行配置

```
"config":{
  "nuxt":{
    "post":"0.0.0.0",
    "port":"3002"
  }
},
```

## 开发代理域名配置

* 配置项在`assets/js/agent.js`文件
* 导航的配置文件在`assets/js/nav.js`文件
* 地址的配置文件在`assets/js/address.js`文件

## Vuex的理解

> 组件和组件之间的传值管理，即状态管理模式

* 在`ssr`中`Vuex`并不是鸡肋，`Vuex`更重要的是维护用户的状态
* `Vuex`不能跨页面，只是用来管理同一个页面之间组件和组件之间的状态
* `Vuex`解决了组件和组件之间传值的麻烦，父子、同级、子父之间

### 两种使用方式

### 第一种分页面管理状态

#### state/index.js文件

**定义**

```
export const state=()=>({
	amount:0
})

export const mutations={
	add(state){
		state.amount++;
	}
}
```

**使用**

```
// 变量
{{$store.state.amount}}

// 方法
@click="$store.commit('add')"
```

#### state/test.js文件

**定义**

```
export const state=()=>({
	amount:100
})

export const mutations={
	add(state){
		state.amount++;
	}
}
```

**使用**

```
// 变量
{{$store.state.test.amount}}

// 方法
@click="$store.commit('test/add')"
```

### 第二种整个网站公用一个状态index.js文件

```
// import Vue from 'vue'
// import Vuex from 'vuex'

// Vue.use(Vuex)

// const store = ()=>new Vuex.Store({
// 	state:{
// 		amount:0,
// 	},
// 	mutations:{
// 		add(state){
// 			state.amount++;
// 		}
// 	}
// })
```

## 使用Vuex来处理表单问题

> 当使用Vuex的时候，处理表单就变得不那么简单了

* 在正常情况下，我们使用`v-model`就足够了，但是在`vuex`中却无法使用
* 在`vuex`我要要在组件中使用计算属性中`get and set`来结合`vuex`中的`state and commit`实现双向数据绑定，即：直接使用双向数据绑定的原理

## 全局方法属性等配置

* 在`plugins`里面添加`.js`文件，例如：

```
import Vue from 'vue'
import axios from 'axios'

const data = {
	install(Vue){
		Vue.prototype.$axios = axios;
	}
};

Vue.use(data)
```

* 在`nuxt.config.js`里面的`plugins`配置，例如：

```
plugins: [
    {src:'~plugins/element-ui', ssr: true},
    {src:'~plugins/address',ssr:false},
    {src:'~plugins/axios',ssr:false},
  ],
```

**使用**

```
console.log(this.$axios)
```

## post and get

### post

```
async onPhoneRepeat(mobile) {
  const {env,checkUserName}=this.$addr;
  const params = {
    loginName: mobile
  };
  return await this.$requestPost(this,`${env}${checkUserName}`,params);
},
```

## 错误集合

### 前后台结构不一致

**错误内容**

`[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside<p>, or missing <tbody>. Bailing hydration and performing full client-side render.`

**解决办法**

* 问题描述：服务端与客户端渲染的DOM结构不一样。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。
* 在`nuxt.config.js`中的`plugins`属性，设置：

```
plugins: [{src:'~plugins/element-ui', ssr: true}],
```

* `false`设置为`true`

### 使用router中params传参出现刷新页面，相关参数被清空的问题

* 一是可以使用本地缓存，把参数缓存起来
* 二是使用router中的query进行传参，例子：

**定义**

```
<nuxt-link :to="{name:'login',query:{userId:'signin'}}"><div class="nav_item sign_item">登录</div></nuxt-link>
```

**使用**

```
<h1>{{$route.query.userId}}</h1>
```

### `vuex.esm.js:383 [vuex] unknown mutation type: updatePhone`

* 是由于没有在`mutation`里面定义`updatePhone`方法
* 出现的原因就是搞错了`state`模块