vue超详细讲解四（Vue CLI3）

Vue CLI2与Vue CLI3的区别

• vue-cli3是基于webpack4打造，vue-cli2还是webpack3
• vue-cli3的设计原则是"0配置"，移除的配置文件根目录下的，build的config的目录
• vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

VueCLI3创建项目和目录结构

npm create project-name第三项为项目名称

• 执行命令后要进行相关的配置，下面有图片进行讲解
  
• 项目打包完成后的目录结构以及各个文件的作用
  

配置去哪里了

我们可以看到vue-cli3中隐藏了配置文件那么我们如何修改配置文件呢？

图形用户界面

输入以下命令，打开图形用户化界面，进行配置
vue ui

1. 我们可以看到以下界面，点击导入可配置我们想要操作的项目
   
2. 导入项目后可看到该项目的相关参数
   1. 在任务中可以启动vue项目,以及项目的相关参数
      
   2. 在配置可查看以及修改项目的相关配置
      
   3. 在依赖中可以查看项目的相关依赖
      
   4. 在插件中可以查看项目所配置的插件
      

配置文件的位置

其实vue-cli3的配置文件在node_modules/@vue/cli-service/webpack.config.js文件中
该文件引入了./lib/Service.js文件
Service.js文件引入了大量的配置

修改配置

如果我们想要修改配置我们可以在项目的根目录下创建名为：vue.config.js文件，对配置进行修改