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
}