vue-cli3.0用法和部分配置的详细说明

很久没关注vue脚手架了。我使用脚手架是因为我昨天需要一个背景模板

做了之后，发现指令不能用了。看了一下官方文档，已经升级到3.0了，我也试过玩。

写怎么玩！

1.首先在全球安装vue-cli3.0

测试安装：

武埃-五世

2.创建一个项目(这更像是用react创建一个脚手架项目)

这里，如果你是第一次使用3.0版本，没有前两个，只有后两个，这里是

让你选，第一个是默认配置，一般选第二个，自己配置，这里选最后一个

选择功能后，系统会要求您进行更详细的配置。

TypeScript:

使用类样式的组件语法：使用类样式的组件语法？

使用babel作为转义：使用babel作为自动检测聚合填充的侧面类型脚本？

CSS预处理器：

选择CSS预处理类型：选择一个CSS预处理程序

短绒器/格式化器

选择接口/格式化程序规范类型：选择一个接口/格式化程序配置

选择lint模式，保存时检查/提交时检查：选择其他lint功能

测试

选择单元测试方法

选择E2E测试方法

当你选择的时候，上图的东西就会出现。在这里，您可以自由选择要使用的配置，并按上下键

选择哪一个，按空格键确定，全部选中后，按enter键进行下一步，这里，

示范的时候，我随意挑了几个

下一步之后，我会问你安装哪种CSS预处理语言。你可以随意选择。我一直在减少使用

上面一个是问你选择哪个自动代码格式检测来配合vscode编辑器

更漂亮-代码格式化程序插件，我选择的下一个

这里的第一个选项是问你是否保存刚才的配置，然后下次选择OK后就可以新建项目了

将会有您之前选择的配置，因此您不必再次重新配置

上面两个意思问你配置文件放在哪里，比如babel，postcss，eslint eslint。

第一个是：放独立文件。

第二个是：放在package.json里面

建议在这里放一个单独的配置文件，选择第一个

上面倒数第二行询问您是否希望将上面的内容保存为未来项目的预配置。

最后一个是描述项目。您可以随意选择，然后单击“确定”下载模板

下载后项目结构变成这样，比2.0简单多了。

然后cd到项目中，并启动服务npm运行服务。

这里发现缺少vue.config.js文件，那么之前的配置怎么了？

以上是2.0的目录结构

这是3.0的目录结构，比2.0少很多。这些都放在@vue/file下。你可以打开看看

接下来要做的就是在根目录中创建新的vue.config.js文件并进行配置。具体配置见文件。我只是在底部列出了几个。

当然，如果不想用3.0，还是可以用2.0的。官方文件是这样说的：

下面是vue、config.js的一些配置项的简单列表

当然，当您配置接口地址时，您仍然可以通过以下方式获得它

在main.js或单独配置接口地址的文件中：

//vue . config . js module . exports={ chainwebpack : config={ config . module。规则(' SCS ')。使用(' sass-loader ')。点击(选项=合并(选项，{ include path s 3360[路径。resolve (dirname，' node _ modules')]，})} }修改webpack Plugin配置

//vue . config . js module . exports={ chainwebpack : config={ config。插件(' html ')。tap(args={ return [/*要传递给html-web pack-plugin的构造函数*/]}}}} eg:在这个项目中比较小，对uglifyjs只做了少量的修改，后期如果有配置优化的话还会继续添加。

chainwebpack k : config={ if(process . ENV . NODE _ ENV==' production '){ config。插件(' uglify ')。点击(([选项])={ //删除console . log return[object . assign(options，{ uglife options 3360 { compresse 3360 { drop _ console 3360 true，pure _ funcs 3360[' console . log ']} } } } })} }全局变量的设置

在项目根目录中创建以下项目：env #在所有链接中执行。env.local #在所有环境中执行，git将被忽略. env[模式] #仅在特定环境中执行([模式]可以是“开发”，“生产”或“测试”)。环境。[模式]。local #在特定环境中执行。Git将被忽略。env.development #仅执行。env.production #仅在开发环境中执行。在文件中配置键值对：

#密钥名称必须以VUE_APP开头。VUE_APP_SECRET=secret在项目中访问：

在console . log(process.env.VUE_APP_SECRET)项目中，process . env . vue _ APP _ SECRET将被SECRET替换。

Vue-cli 3在项目表现方面一直相当友好，私有制特别强，各种配置特别贴心。可以根据项目规模和特点进行私人预设，大大提高了前期项目建设的效率。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。