Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO。
项目初始化
参考:
$ 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}