一、下载安装nodeJS

1.下载地址：http://nodejs.cn/；windows一路next安装完成即可。
2.检查nodejs安装是否成功，打开cmd输入命令node -v;能正常输出版本号说明安装成功。

image.png
3.检查npm，通过命令进入nodejs安装目录，输入命令npm -v ，能正常输出版本号说明安装成功，我安装在C盘的tool文件夹下的nodejs文件夹。
image.png

二、下载安装代码编辑工具VSCode

1.下载地址：https://code.visualstudio.com。
2.安装VSCode:
将这三项勾选，然后直接下一步安装即可。

image.png

三、下载安装Git

1.下载地址：https://git-scm.com/；如果官网下载太慢可通过360软件管家一件安装。
2.一路next进行安装即可

四、VSCode修改命令工具为Git-Bash

点击左下角的齿轮选择设置(或者通过快捷键:Ctrl+,直接打开)：

image.png

在设置的输入框搜索：Shell:windows；找到：Terminal>Integrated>Shell:windows，这一项点击在settings.json中编辑。

image.png
settings.json将内容修改为："terminal.integrated.shell.windows": "C:\tool\Git\bin\bash.exe"，其中C:\tool\Git是我Git的安装路径。
image.png

重启编辑器通过快捷键：Ctrl+~ 打开命令工具， 显示如下图既OK。

image.png

四、安装vue-cli

1.为了加快安装效率需要将nodejs的默认镜像库修改为国内的淘宝镜像库(npm.taobao.org)。
在VSCode中通过命令工具进入nodejs安装目录；

image.png
输入命令：npm config set registry https://registry.npm.taobao.org 修改镜像库地址； image.png

2.通过命令：npm install -g vue-cli 安装vue-cli,安装完成之后通过命令:vue --version 查看版本号，检查vue-cli是否安装正常

image.png

五、构建项目

1.进入存放项目的文件夹，我这里把项目放在c盘的tool文件夹下的html-project，则输入命令cd /c/tool/html-project

image.png

2.运行命令：vue init webpack observer 这里的observer是项目名称可以自己定义

image.png
3.选择项目属性；
Project name:——项目名称

Project description:——项目描述
Author:——作者
Vue build:——构建模式，一般默认选择第一种
Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到
Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装
should we run 'npm install' for you after the project has been created?——选择npm

image.png

六、运行项目，添加UI库

1.在项目存放目录运行命令：code . 打开项目，
我这里的目录是：/c/tool/html-project/observer ;运行完成后VSCode会新开一个窗口，就是刚刚构建的项目。

image.png
image.png
2.在项目窗口通过(刚刚的新窗口)快捷键：Ctrl+~ 打开gitbash终端。
image.png
3.这里用VUX UI库举例(官网地址:https://vux.li/
)，运行命令：npm install vux --save 安装vux UI库。
image.png
4.运行命令：npm run dev 启动项目
image.png
5.打开浏览区输入访问地址：localhost:8080，可以访问则说明项目构建成功。
image.png