Nuxt 開發 - 專案初始化
阿新 • • 發佈:2018-12-04
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
專案初始化後的配置
- 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
需要安裝:$ npm install babel-cli -S
- 安裝 sass
$ npm install sass-loader node-sass
安裝後可能會有提示:
npm WARN [email protected] requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
此時,需要安裝:
$ npm i [email protected]^3.18.0
$ npm i [email protected]^6.0.0
- 修改 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
}