脚手架（vue-cli）环境搭建及其脚手架搭建好的项目的讲解

通过官方脚手架，（命令行的方式）搭建模块化，工程化，自动化开发环境

1、查看版本（这是查看脚手架的版本）

vue -V  

2、如果版本是低于3.X，那么卸载脚手架，安装最新的。

npm uninstall vue-cli -g  

3、安装（脚手架工具）

 1) 装脚手架工具的3.x/4.x

npm install -g @vue/cli

 2)桥接2.X（兼容脚手架2.X）

npm install -g @vue/cli-init

4、创建项目：使用脚手架搭建项目（文件夹）

1）、如果想搭建版本 v3.x/4.x

vue create 项目目录

2)、如果想搭建版本 2.X

vue init webpack 项目目录

注意：项目目录，不要和官方的或者第三方的模块重名，也不要使用汉字（每一级文件夹尽量不要使用汉字）

当然，直接copy他人生成的项目环境也是可以的。

脚手架搭建好的项目的讲解

1）、vue-cli2.X

build文件夹： webpack的相关配置

config文件夹：项目环境的配置。

src文件夹：源代码的文件夹

src/assets文件夹: 存放静态资源（css，图片，字体文件，视频，音频等等），这些静态资源会做（webpack）打包处理（编译）

src/components文件夹: 所有的组件

src/App.vue：main.js所引入的App.vue是模板（main.js里的Vue对象的模板）

src/main.js:   就是唯一的html文件所对应的唯一的Vue对象（根实例）。入口文件。

static文件夹：存放静态资源（但是该文件夹下的文件不做（webpack）打包处理）。

index.html:唯一的HTML文件。

2）、vue-cli3+（相同之处就不说了）

区别：

隐藏了build和config文件夹

把static文件夹变成了public文件夹：放置静态资源，把唯一的index.html也放在了public下。