Vue/cli3.0的一些小技巧
vue/cli3.0比起vue/cli2.*来说,最明显的区别就是简化了两个文件,一个是build文件和config文件。vue/cli3.0把这两个文件的配置写进了node_modules里面去了。不过有些时候我们也需要配置一些适合自己项目开发的东西,所以我们可以把自己的相关配置写入vue.config.js文件中。(这个文件需要自己在src同目录下新建,下面统一说成根目录)介绍一下今天...
vue/cli3.0比起vue/cli2.*来说,最明显的区别就是简化了两个文件,一个是build文件和config文件。vue/cli3.0把这两个文件的配置写进了node_modules里面去了。不过有些时候我们也需要配置一些适合自己项目开发的东西,所以我们可以把自己的相关配置写入vue.config.js文件中。(这个文件需要自己在src同目录下新建,下面统一说成根目录)
介绍一下今天要分享的小技巧。
env全局变量,配置npm start及自动打开浏览器,配置eslint。
一、env全局变量。
1.在根目录下新建.env文件。
2.存值:VUE_APP_变量名=变量值。
3.取值:process.env.变量名。
二、配置npm start及自动打开浏览器。
vue/cli3.0和vue/cli2.*,这里运行命令改变,原来是npm run dev(npm start),现在是npm run dev。所以我们如果想用原来的npm start的话,需要在package.json里进行配置。至于为什么要配置,无他,命令短(我们知道其实npm start是npm run start的简写),能不用记的单词,尽量不去记,但是运行原理一定要知道,为什么可以这样用,一定要知道。
在package.json里的script属性里输入命令。
至于为什么要自动打开浏览器,因为省去第一次运行可以不用去打开浏览器输入网址。
默认是不能打开自动打开浏览器的,大概是因为每次输入npm start运行都会出现一个新窗口吧!
我们知道Alt+Tab键是窗口切换,其实window7的window+Tab键可以炫酷切换窗口(虽然速度慢)
三、配置eslint。
eslint是一种代码规范,可以减小错误,以及提高团队之间的协作能力。这里有两种方法进行配置:
1..eslintrc.js文件进行配置
在根目录下新建.eslintrc.js文件进行配置。最后附上所有的配置解释代码。
2.package.json进行配置。
如果你在使用vue/cli3.0创建项目时选择了eslint那么在你的package.json里就有eslintConfig属性。在rules里进行配置。
小提示:json文件里不能写注释哦!
如果想要了解全部的eslint配置,请点击这里。
欢迎大家在评论区讨论!
更多推荐
所有评论(0)