Vue CLI3配置详解-----脚手架的认识以及项目初始化、项目目录结构

旧城等待， 2022-10-27 00:29 6阅读 0赞

### 使用Vue CLI3创建项目： ###

脚手架(scaffold) 指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。**建筑界的通用术语。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

### 写在前面： ###

- 如果你只是简单的写几个Vue的**Demo**程序，那你不需要Vue CLI。
     - 如果你**开发大型项目**，那你需要，而且**必须**使用Vue CLI。
     - 开发大型项目时，必须考虑代码目录结构、项目机构和部署、热加载、代码单元测试等事情。
     - 如果每个项目都要手动完成这些工作，工作效率低下，所以要使用脚手架来帮助我们完成这些事情。

## CLI是什么意思？ ##

CLI:Command-Line-Interface，翻译为命令行界面，俗称脚手架。
    使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

## CLI使用前提–Node ##

1:安装NodeJS：你可以在官方网站中直接下载安装：http://nodejs.cn/download/
    2:检测安装的版本：
      -默认自动安装Node和NPM（Node Package Manager,是一个NodeJS包管理和分发工具，经常使用NPM来安装一些开发过程中的依赖）
      -Node环境要求8.9以上或者更高版本
      -使用 node -v  npm -v 来检查版本

##### 提示： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]

### 脚手架Vue CLI的使用安装 ###

1：npm install -g @vue/cli  	   //-g 全局安装
    2：vue init webpack my-project     //Vue CLI2初始化项目
    3：vue create my-project           //Vue CLI3初始化项目 （**2/3根据需要选择**）
    //提示：如果使用CLI版本过低，则需要卸载重新安装，代码如下
    4：npm uninstall -g vue-cli       //卸载
    5：npm install -g @vue/cli        //安装最新版本

### 以下演示使用Vue CLI3 ###

vue create “文件名”

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]  
相关配置选项的选择以及含义（空格选中/反选）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20210202190305443.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]  
继续回车就会进行脚手架cli3的创建，创建成功如下，按照提示运行命令启动程序：  
![在这里插入图片描述][20210202190947507.png]  
运行将项目启动：成功启动界面如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]  
点击链接：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]

至此：**恭喜你**已经成功的创建了一个基于**脚手架cli3**的项目，可以开始你的开发！

## 通过编译器打开刚才配置好的项目，目录结构如下： ##

可以看到脚手架cli3的目录结构相比较cli2很大的简洁了，原因是一些配置不希望你看到，进行了相应的隐藏

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]

#### 好奇：和vue cli2相比那些配置文件到底去了哪里？如果想要更改要去哪里进行？ ####

Vue cli3的优点以及与cli2的区别：
    	1：vue-cli3的设计原则是“0配置”，移除了配置文件根目录下的一些配置文件：build、config等
    	2：vue-cli3提供了 vue ui 命令，提供了可视化配置，更加人性化
    	3：移除了static文件夹，新增了public文件夹，并且将index.html移动到public中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]

#### 关于使用 vue ui启动配置服务器进行cli3的配置情况请见下一篇总结！感谢观看！ ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/d635f77d81b64ecd99c667bf6523ecf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/9b8c49465fc34b2fa2f233d28ccad4f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/81af34d1a6d84943a6cc54c107e1fb85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221024/2652e34026c64400bf77a6fb50c996da.png
[20210202190305443.png]: /images/20221024/0a9a423f651c41d982901fd6fbb4a839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221024/df027babcd7c4058b9ad20a6f885a273.png
[20210202190947507.png]: /images/20221024/cfd906bf6b5f4e3c853470eb5147f3b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221024/768023c30959461891dc1639f7a33c86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]: /images/20221024/1b3db38a67264cdabcdaf01f4ed4d318.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]: /images/20221024/f068ba4d5c8245fd90db03283346deed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]: /images/20221024/286ba59e0ed74a2996ed33f82da2761e.png