nuxt搭建和配置多页架构

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

nuxt搭建和配置多页架构

例子代码基础架构和配置

例子代码基础架构和配置-即nuxt-base-cli

总结

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

🤗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

# 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

集成内容

网页`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模块
在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模块