Vue Ssr之旅 —— Nuxt

Nuxt 官方网站：https://nuxtjs.org/

官方脚手架工具 Create-nuxt-app： https://github.com/nuxt-community/create-nuxt-app

Nuxt 官方 Examples 教程：https://nuxtjs.org/examples

Nuxt 官方 Api 文档：https://nuxtjs.org/api

 

安装教程

第一步：把npm升级到最新版本，这一步是为了获得npm的最新的工具 —— npx（了解更多...）

$ npm install npm@latest -g

 

第二步：使用create-nuxt-app初始化项目。（由于该工具是交互型命令行，推荐使用CMD或者Powershell来执行以下命令）：

$ npx create-nuxt-app chuanghui-edu-web

 

第三步：等待交互，选择参数

 

第四步：默认安装的是nuxt最新版本@1.4.2，而脚手架实际上还是使用nuxt@1.0的版本，这会导致启动异常，所以我们手动降级到nuxt@1.0版本。

$ cnpm install nuxt@1.0

 

第五步：启动

$ npm run dev

 

启动成功后，【默认首页】和【项目结构】如图所示：

 

 

---

 

FAQ

 

1、如何（全局 / 局部）加载插件和样式？ https://nuxtjs.org/faq

2、如何自定义 webpack 配置？ https://nuxtjs.org/faq/extend-webpack

3、layouts 中的页面该如何使用？

https://nuxtjs.org/guide/views#layouts    

https://nuxtjs.org/api/pages-layout   

https://www.youtube.com/watch?v=YOKnSTp7d38

 

4、如何添加 webpack-plugins 插件？ https://nuxtjs.org/faq/webpack-plugins

 

---

 

 

Nuxt 相关认知

 

1、nuxt默认为我们提供了 autoprefixer

 

 

---

 

 

坑爹锦集 / 碎片知识

 

1、让 *.vue 中的 <style> 支持scss/sass语法

传送门：https://nuxtjs.org/faq/pre-processors

<style lang="scss" scoped>
.test {
  background-color: red;
}
</style>

添加sass-loader即可：

$ cnpm install node-sass sass-loader 

 

2、开发模式下不支持ip访问？

传送门：https://nuxtjs.org/faq/host-port

设置一下package.json即可。将config.nuxt.host设置为 0.0.0.0 然后重启就可以了。

"config": {
      "nuxt": {
          "host": "0.0.0.0",
          "port": "3000"
      }
},

 

3、如何编译出生产环境的代码?

$ npm run generate

然后在/dist就是我们的生产环境代码了，我加入了test.vue，所以生产的时候，多了一个 test/index.html 文件夹和文件

直接打开 index.html，可以正常看到界面。

那为什么不是 $ npm run build 呢？

根据官方的说法：https://nuxtjs.org/guide/commands

build主要是使用webpack来编译资源，并不是打包和编译静态文件的操作。所以我们ssr用户还是关心 generate 就好了。

 

4、如何使用和定义vuex？

Vuex 官方文档：https://vuex.vuejs.org/installation.html

Nuxt官方教程：https://nuxtjs.org/guide/vuex-store

Nuxt官方demo：https://nuxtjs.org/examples/vuex-store

Nuxt Vuex demo github 源码：https://github.com/nuxt/nuxt.js/tree/dev/examples/vuex-store

我的demo，仅仅是套路示例：/store/index.js

import Vuex from 'vuex'
import users from './users'

const createStore = () => {
  // 新建 Store
  return new Vuex.Store({
    // false：非严格模式
    strict: false,
    // 状态
    state: {
      counter: 0
    },
    // 在非严格模式下，action是可以直接修改state，但不推荐这样做。所以我们约定：
    // 1、 action为异步而生： 只有需要异步操作才定义和使用action，否则外部直接调用mutations来更新state即可；
    // 2、 action不能操作state：在进行完异步操作之后，只能通过commit调用mutations来更新state。自己不能操作state
    actions: {
        nuxtServerInit ({ commit }, data) {
          // 使用commit调用mutation
          commit('user', data.req.session.user)
        },
        // 异步action示例
        async nuxtServerInit({ dispatch }) {
          // 继续调用其他action
          await dispatch('core/load')
        },
    },
    // 在非严格模式下，外部其实可以直接获取state，这个getters实际上是冗余的。
    getters: {
      AppData (state) {
         return state.AppData;
       }
    },
    // 同步更新state
    mutations: {
      increment (state) {
        state.counter++
      }
    },
    // 独立模块
    modules: {
　　　 // 建议分离出去，当模块越来越多的时候，模块的套路也是一样的格式，详情看下一个Demo
      users,
    }
  })
}

export default createStore

在非严格模式下，action是可以直接修改state，但不推荐这样做。所以我们约定：
1、 action为异步而生： 只有需要异步操作才定义和使用action，否则外部直接调用mutations来更新state即可；
2、 action不能操作state：在进行完异步操作之后，只能通过commit调用mutations来更新state。自己不能操作state

 

独立模块的套路：/store/users/index.js

let state = {
    AppData: {}
}

const actions = {
  setAppData ({ commit, state, dispatch }, data) {
    commit('setUserData', data.userInfo)
  }
}

const mutations = {
    setUserData (state, userInfo) {
      return state.AppData = userInfo
    }
},

const getters = {
  AppData (state) {
    return state.AppData;
  }
}

export default {
  state,
  mutations,
  actions,
  getters,
}