一、传统工程的问题 1、兼容性问题 2、使用模块化会导致JS文件增加，从而导致传输文件数增加，增加网络IO 3、直接使用原始代码会导致文件体积过大 4、使用第三方库很不方……
一、传统工程的问题
1、兼容性问题
2、使用模块化会导致JS文件增加，从而导致传输文件数增加，增加网络IO
3、直接使用原始代码会导致文件体积过大
4、使用第三方库很不方便
1）搜索
2）下载
3）引用js (某些第三方库可能没有ES6模块化版本)
5.、vue模板书写在字符串中，没有智能提示，没有代码着色
6、难以把css样式代码集成到vue组件中
7、其他诸多细节问题…
这些问题的本质是:开发的代码和运行的代码要求不同
所以，我们需要一个工具，它能够让我们舒舒服服的写代码，然后通过这个工具转换后，得到一个最适合运行的代
码。在vue中，这个工具就是vue-cli
二、vue-cli的安装
vue-cli是一个脚手架工具，它集成了诸多前端技术，包括但不仅限于:
- webpack
- babel
- eslint
- http-proxy-middleware
- typescript
- css pre-prosessor
- css module
- ….
这些工具，他们大部分都要依赖两个东西:
- node环境:很多工具的运行环境
- npm:包管理器，用于下载各种第三方库
提示：目前，npm已和node集成，当安装node后，会自动安装npm
三、环境搭建
1、官网下载node:
官网地址：https://nodejs.org/zh-cn/，选择长期稳定版
2、安装nodejs
双击下载好的msi文件安装node，全部都直接Next，安装路径可自行调整
3、验证安装
安装成功后，打开cmd命令行，使用如下指令查看node和npm版本，验证是否安装成功:
node -v npm -v
4、配置源地址
默认情况下，npm 安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置npm的源地址，使用下面的命令更改npm的源地址为淘宝源
npm config set registry http://registry.npm.taobao.org/
更改好了之后，使用如下指令查看源地址是否正确的被更改
npm config get registry
5、安装vue-cli
使用下面的命令安装vue-cli工具
npm install -g @vue/cli
安装好之后，检查vue-cli是否安装成功
vue --version
提示：如果出现vue指令不是内部命令，则可以在执行安装vue指令的目录中或全盘查找vue.cmd文件，然后将文件所在目录配置到环境变量的path中，如果找不到则执行npm uninstall -g @vue/cli卸载vue-cli，然后再次安装，再去查找配置
四、vue-cli的使用
第1步：在终端中进入某个目录
选择一个目录，该目录将放置你的工程文件夹，在cmd终端中进入该目录
第2步：搭建工程
使用vue-cli提供的命令搭建工程，命令如下：
vue create 工程名
具体演示如下：
1）进入工程目录，执行创建指令
我这里是放在F盘VueProjects下：
cd VueProjects vue create first-app
注意:工程名只能出现英文、数字和短横线
2）执行指令后会询问工程配置方式是默认还是手工，我们通过上下键选择手工配置，然后Enter回车
3）接着只选择babel，去掉Linter（按空格可选择或去掉选择），然后Enter回车
4）选择vue版本，我们选择2.x，然后Enter回车
5）选择配置存放方式，我们选择json，然后Enter回车
6）输入n不保留配置，然后Enter回车，项目就会开始创建
7）创建完成后，我们在工程目录中就可以找到对应的项目
8）我们将生成的项目直接拖入HBuildX中打开，查看项目结构
补充：vue-cli 4.x实际开发目录结构说明（有些目录我们之前生成的没有）：
| 目录 | 含义 |
| dist | 用于存放使用 npm run build 命令打包的项目文件 |
| node_modules | 用于存放我们项目的各种依赖 |
| public | 用于存放静态资源 |
| public/index.html | 是一个模板文件，作用是生成项目的入口文件。 浏览器访问项目的时候就会默认打开的是生成好的index.html |
| src | 是存放各种vue文件的地方 |
| src/assets | 用于存放着各种静态文件，比如css，less，sass，fonts，images，一些外部的js等 |
| src/components | 用于存放我们的公共组件，比如Header.vue、Footer.vue等 |
| src/router/index.js | vue-router路由文件。 需要引入src/views文件夹下的.vue，配置path、name、component |
| src/store/index.js | 是vuex的文件，主要用于项目里边的一些状态保存。 比如state、mutations、actions、getters、modules |
| src/views | 用于存放我们写好的各种页面，比如Login.vue，Home.vue |
| src/App.vue | 是主vue模块，主要是使用router-link引入其他模块， App.vue是项目的主组件，所有的页面都是在App.vue下切换的 |
| src/main.js | 入口文件，主要作用是初始化vue实例， 同时可以在此文件中引用某些组件库或者全局挂载一些变量 |
| .gitignore | 配置git上传想要忽略的文件格式 |
| babel.config.js | 是一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6的代码转换向后兼容（低版本ES） |
| package.json | 模块基本信息项目开发所需要的模块，版本，项目名称 |
| package-lock.json | 是在npm install时候生成的一份文件， 用于记录当前状态下实际安装的各个npm package的具体来源和版本号 |
第3步：安装依赖（可省略）
注意：此步可以省略，因为我们项目已经安装了依赖，就是node_modules文件夹中的内容，如果你把此文件夹删了，可以使用此指令重新安装
在cmd终端中通过cd指令进入项目目录first-app，执行如下指令安装依赖：
npm install
第4步：运行项目（开发时用）
继续执行如下指令运行项目：
npm run serve
执行完会弹出防火墙提示，点击允许访问，运行结果如图：
浏览器访问地址，正常显示首页：
提示：cmd窗体此时不能关闭也无法继续输入指令，如需关闭可以使用ctrl+c关闭，那么则无法继续访问页面
第5步：编译打包部署（生产环境部署时用，开发时不用）
1）重新打开cmd，进入first-app目录，执行下面的命令编译打包生成浏览器可运行文件：
npm run build
2）打开HBuildX发现多出了dist目录，这里面就是编译打包后的文件，可独立运行，生成的html、js、css文件都被压缩过了，整个目录结构是不是很熟悉？
3）找到dist中index.html，直接运行到浏览器即可，不过我们发现，页面空白，无法正常显示！报错如下，通过F12查看发现js报错。
4）再通过network查看发现，根本原因在于Vue-CLI 4.x在打包是会将js、css等文件默认以绝对路径的方式引入，导致运行出错。我们可以将其以相对路径方式引入，我们需要在first-app下新建一个名为vue.config.js的文件，内如如下：
module.exports = {
publicPath: "./",
};
然后，重新再终端运行编译打包指令，重新生成dist，在运行到浏览器发现正常访问。
5）将dist目录中的代码直接整合部署到项目中使用，在此不再赘述
五、HBuildX快速使用vue-cli创建vue项目
1）在文件->新建->项目，选择如下：
2）创建好后，选择项目后，在左下角打开终端，执行运行指令，即npm run serve
3）访问浏览器，效果一样
还没有评论呢，快来抢沙发~