博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Nuxt 开发 - 项目初始化
阅读量:6852 次
发布时间:2019-06-26

本文共 2145 字,大约阅读时间需要 7 分钟。

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}

初始化后的项目参考:

https://github.com/caochangkui/meituan-app-nuxt/tree/nuxt-init
可在此基础上进行项目开发

转载于:https://www.cnblogs.com/cckui/p/10063550.html

你可能感兴趣的文章
Echarts 使用遇到的问题
查看>>
ubuntu16.04环境下安装配置openface人脸识别程序
查看>>
【HDOJ】4426 Palindromic Substring
查看>>
第十一周仿真作业
查看>>
VOC Segmentation GT图像颜色表生成分析
查看>>
第三次实验报告
查看>>
Visitor设计模式
查看>>
测试文档文档要求
查看>>
个人关于模块化的理解
查看>>
柴夥說算法(3)--交替迭代
查看>>
iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
查看>>
动画的timing-function比较
查看>>
java输出各种学生成绩
查看>>
uva 10020 Minimal coverage (greedy)
查看>>
LA 4973 Ardenia (3D Geometry + Simulation)
查看>>
微信开发学习(二)
查看>>
JS中的“!!”
查看>>
python之MySQL操作
查看>>
radioButton添加试题选项webview(二)
查看>>
Centos7 linux 安装 redis 遇到的几个问题
查看>>