搭建vuec-li脚手架项目

1.安装node.js和npm

NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题,npm就是前端的Maven。

直接去node.js官网下载nodejs，文件很小，只有二十几兆，下载后直接安装，一直点下一步即可

下载完成后，win+r并输入cmd打开命令面板，输入node -v，出现版本号则安装成功，npm也安装成功，输入npm -v可以显示npm的版本信息

2.全局安装vue-cli

全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：拷贝以下指令（若要安装指定版本就拷贝下面哪条，@后面的x.x.x为版本号，eg：npm install -g @vue/cli@5.0.8）到命令面板，回车则安装

//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本
npm install -g @vue/cli@x.x.x

安装完成后，在命令面板输入：vue -V 显示版本号来测试vue是否安装成功，出现版本号则安装成功

3.创建vue-cli工程

打开HBuilder,在文件名上右键，单击使用命令行窗口打开所在目录，然后自动打开命令面板
输入 cd .. 返回上级目录
输入vue create vuecli_01_oyxl (vuecli_01_oyxl 是vuecli项目名，自己拟），回车

【若网络不好，则会跳出以下两行代码，敲Y回车或直接回车就可以，网络良好则不会跳出如下两行

】

4.按向下方向键选择Manually select features这一行，回车

5.选中以下三个模块，按上下方向键选择相应的模块，按空格选中或取消选中，回车

6.选择3.x，回车

7.输入n,回车

8.按向下方向键选择 In package.json，回车

9.输入n回车，或直接回车

10.将如下两行分别输入并回车

11.出先以下界面，将框起来的部分拷贝到浏览器运行

12.浏览器运行出现以下结果则脚手架成功(注意：服务器（即第11点的图）要一直开着浏览器该页面才能正常运行)

3.导入脚手架项目到HBuilder

1.在HBuilder的目录列表中空白处右键——导入——从本地导入目录

2.选择要导入的vuecli文件

可见HBuilder目录列表已导入vuecli项目

vue-cli工程目录结构及分析

3.修改启动端口号（因为默认的8080也是tomcat的启动端口号，两者会起冲突）

在vue.config.js配置文件中添加以下代码：

devServer:{port:8081 //修改启动端口}

4.启动服务器（有以下两种方式）

启动后可见端口号已经变成了自己所改的端口号（8081）

复制该网址到浏览器中打开