nuxtjs相关环境搭建

最新推荐文章于 2024-07-25 15:57:23 发布

weixin_34138056

最新推荐文章于 2024-07-25 15:57:23 发布

阅读量351

点赞数

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017421273

版权

建议版本：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。（安装教程：

这样就会成功了，说明服务端程序支持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配置

关注