@vue/cli3项目搭建（一）

nvm下载选nvm-setup.zip

1，使用nvm管理多个node版本

nvm install 12.16.1 ：安装某版本node
nvm list ：查看node版本列表
nvm use 12.16.1 ：使用某版本node

不需要多版本node可忽略

2，安装

//安装淘宝镜像
npm install cnpm -g

//安装脚手架
cnpm install @vue/cli -g

//创建vue的demo
vue create demo

3，配置vue.config.js

在根目录创建vue.config.js文件

配置全局sass变量

module.exports = {

    // 全局配置css文件
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/css/common.scss";
                    `
            }
        }
    },
}

但是这里有个坑，sass-loader 新版和旧版写法不一样

// 旧
data: `@import "~@/assets/scss/common.scss";`
// 新
prependData: `@import "~@/assets/scss/common.scss";`

关掉烦人的eslint错误检测

vue.config.js中添加

	lintOnSave:false,

4，分析项目中包含的模块们的大小

在package.json文件中添加

 "report": "vue-cli-service build --report",

在dist中生成 report.html 以帮助分析包内容的大小

5，项目大小优化

vue/cli3 项目大小优化
在package.json文件中添加

 "modern": "vue-cli-service build --modern",

会生成一大一小两个包，不同的浏览器会根据情况加载其中一个，不需要特殊部署，现代浏览器加载更小的包，速度更快

6，配置全局可用的环境变量

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

注意：属性名必须以VUE_APP_开头，比如VUE_APP_XXX

重新npm run serve后，在任何地方打印process.env属性（全局属性）：