P12.3-VueCLI3创建项目

1.概述

vue-cli 3 与 2 版本区别

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
• vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
• 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2.VueCLI3创建项目

2.1.VueCLI3创建项目命令

# 创建项目命令
vue create mycli3

#命令说明
vue create：创建项目命令
mycli3：项目名称

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

2.2.选择配置方式

我们选择手动配置方式

2.3.选择项目需要的配置

通过上下键切换配置选项，空格键选中和取消该配置选项。我们只选择一个babel就可以了，后面的暂时用不到先不安装。

2.4.选择配置文件存放路径

• In dedicated config files：配置文件单独存放
• In psckage.json：配置文件存放到package.json文件中

我们选择第一个选项单独存放到配置文件

2.5.是否保存为模板

询问我们是否将上面配置保存为模板，如果保存为模板，下次在创建项目时候直接选择我们保存的模板，就不需要在手动配置。

2.6.自定义保存模板名字

2.7.等待VueCLI3创建项目完成

2.8.查看保存的模板

执行创建项目命令，就会显示我们刚才创建的cli3模板，选择该模板可以直接创建项目，不需要再配置项目需要的组件。

2.9.删除保存的模板

如果我们保存的模板很多，或者有些模板已经不需要了。我们如何删除这些模板那？

• 的打开电脑–C盘–用户–登录电脑的账户–打开.vuerc文件
  
• 修改.vuerc文件删除不需要的模板，注意cli3模板是最后一个模板如果删除的模板是文件中最后一个，那么也要将模板上面挨着的逗号删除。这个是json格式要求，最后一个对象不需要逗号。
  
• 再次安装项目保存的模板已删除
  

3.VueCLI3项目目录介绍

3.0.VueCLI3项目完整目录

3.1.CLI3和CLI2 package.json区别

在CLI3中package.json界面要比CLI2中package.json简洁很多，在CLI3中对package.json包做了优化，使用@vue/cli-service来管理包。所以在package.json中看上去简洁了很多。

3.2.CLI3和CLI2 main.js区别

3.3.运行VueCLI3和VueCLI2项目命令区别

VueCLI3项目package.json运行项目命令做了调整，调用vue-cli-service间接调用package构建项目。

• 运行项目

#进入项目根目录
cd .\mycli3\

#运行项目
npm run serve

  

 

  
1
  
2
  
3
  
4
  
5
 

文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。

原文链接：brucelong.blog.csdn.net/article/details/111560071