Nuxt 开发 - 项目初始化

Nuxt是基于Vue的一个应用框架，采用服务端渲染（SSR），可以让用户的Vue单页面应用（SPA）也可以有利于SEO。

项目初始化

参考：https://zh.nuxtjs.org/guide/installation

$ npm install -g npx
$ npx create-nuxt-app <项目名>

安装过程中的配置选项：

• ? Project name meituan-app
• ? Project description My neat Nuxt.js project
• ? Use a custom server framework koa
• ? Use a custom UI framework element-ui
• ? Choose rendering mode Universal
• ? Use axios module yes
• ? Use eslint yes
• ? Use prettier no
• ? Author name cedric
• ? Choose a package manager npm

$ npm install --update-binary

项目初始化后的配置

1. 使用ES6的 import/export

node本身不支持import export 指令，项目想要使用import 需要在项目中引入babel 进行处理，所以在package.json中做如下修改：（参考：http://www.ruanyifeng.com/blog/2016/01/babel.html）

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

如果报错：[nodemon] failed to start process, "babel-node" exec not found

需要在根目录新建 .babelrc文件

里面写入：

{
    "presets": ["es2015"]
}

然后安装:

$ npm install babel-preset-es2015

$ npm install babel-cli -S 

2. 安装 sass

$  npm install sass-loader node-sass

安装后可以会有提示：

npm WARN acorn-jsx@5.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN eslint-plugin-vue@4.7.1 requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

此时，需要安装：

$ npm i eslint@^3.18.0
$ npm i acorn@^6.0.0

3. 修改 nuxt.config.js

css: [
    'element-ui/lib/theme-chalk/reset.css',
    'element-ui/lib/theme-chalk/index.css'
],

...

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
    cache: true
}

初始化后的项目参考：

https://github.com/caochangkui/meituan-app-nuxt/tree/nuxt-init

可在此基础上进行项目开发