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设置

    原文作者:王浩羽
    原文地址: https://segmentfault.com/a/1190000017421273
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞