P12.3-VueCLI3创建项目

P12.3-VueCLI3创建项目

文章目录

P12.3-VueCLI3创建项目

1.概述

2.VueCLI3创建项目

2.1.VueCLI3创建项目命令

2.2.选择配置方式

2.3.选择项目需要的配置

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

2.5.是否保存为模板

2.6.自定义保存模板名字

2.7.等待VueCLI3创建项目完成

2.8.查看保存的模板

2.9.删除保存的模板

3.VueCLI3项目目录介绍

3.0.VueCLI3项目完整目录

3.1.CLI3和CLI2 package.json区别

3.2.CLI3和CLI2 main.js区别

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

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

JavaScript Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。