乐趣区

nuxtjs相关环境搭建

建议版本:node8.12.0 vue2.5.17 npm6.4.1 webpack4.19.1 nuxt2.0.0
关于全局安装 webpack 有许多坑。详情可慢慢琢磨(https://blog.csdn.net/Fabulou…,https://www.cnblogs.com/lansan0701/p/7019031.html webpack 有关于 sass-loader)
全局安装 npx:npm install -g npx 然后在使用 nuxt-cli 创建项目 npx create-nuxt-app profectname
创建完成项目 运行 npm run dev 报错 index.vue 36 行 删除 36 行空格就可以了
使用 nuxt 脚手架创建项目没有处理 import 问题,也就是模块只能使用 require。识别不了
import 引入
问题在于 npm run dev 使用的是 cross-env NODE_ENV=development nodemon
server/index.js –watch server 使用了 NODE_ENV node 本身是不支持 import export 这种方法的,这里直接使用 node 启动程
序,没有经过 babel 处理。所以他是不会识别的
解决方法:使用 babel 启动。
nodemon 热启动,也就是改了文件自动刷新。
使用 nodemon 和 babel 一起启动,
给 dev 后加上 -exec babel-node 使用 babel 和他一起启动。
也就是变成 cross-env NODE_ENV=development nodemon server/index.js —

watch server -exec babel-node (注意 不仅仅是开发环境,线上环境也应该加上保证使
用 babel)
这样重新启动项目 会发现还是报错。是因为虽然我们使用了 babel node 启动,但是我们并
没有给 babel 指定指令集。所以就要创建 babel 的配置文件。在项目文件内(如 mt-app/)创建一个配置文件 .babelrc 进入文件 加上指令集。{
“presets”:[“es2015”]
}
这里仍然需要给配置文件 安装一下 npm install babel-preset-es2015(注意这里一步!!如果以上步骤做完报错)babel-node 不是内部外部命令。说明你没有
全局安装 babel,需要全局安装 babel。(安装教程:
https://www.jianshu.com/p/3e1…)
这样就会成功了,说明服务端程序支持 es6 方式去写了。
同时使用 element-ui 框架的话,应该在 nuxt.config.js 中引入饿了么的 css 文件,也就是
reset 初始化 css 文件 ‘element-ui/lib/theme-chalk/reset.css’ 就可以了。以及一些其它的全局 css 样式文件都应该在这里引入
同时 nuxt.config.js 已经使用 modules 使用了 axios 模块,关于 axios 相关的配置,可以在
axios 中进行配置。(前提安装时候选择 axios 模块)
build 的配置文件。
如果我们想加一个缓存,增快他的编译速度。可以在 build 中添加 cache:true 增加了编
译速度。
其他的基本在实战中进行改装。这节主要是 配置:1. 使用 es6 的 import/export 2. 修改 build 配置

退出移动版