一、下载安装nodeJS
1.下载地址:(Node.js 中文网);windows一路next安装完成即可。
2.检查nodejs安装是否成功,打开cmd输入命令node -v;能正常输出版本号说明安装成功。
![](https://pic3.zhimg.com/v2-f89bdbc59bc749949011f4315a05ef8e_b.jpg)
3.检查npm,通过命令进入nodejs安装目录,输入命令npm -v ,能正常输出版本号说明安装成功,我安装在C盘的tool文件夹下的nodejs文件夹。
![](https://pic1.zhimg.com/v2-5af208486758d7b58d026085690e1eb0_b.webp?consumer=ZHI_MENG)
二、下载安装代码编辑工具VSCode
1.下载地址:[Visual Studio Code - Code Editing. Redefined](Visual Studio Code - Code Editing. Redefined)。
2.安装VSCode:
将这三项勾选,然后直接下一步安装即可。
![](https://pic2.zhimg.com/v2-d4d0fe7e95381ee1a11a96142f60ffb5_b.webp?consumer=ZHI_MENG)
三、下载安装Git
1.下载地址:[Git](Git);如果官网下载太慢可通过360软件管家一件安装。
2.一路next进行安装即可
#四、VSCode修改命令工具为Git-Bash
点击左下角的齿轮选择设置(或者通过快捷键:Ctrl+,直接打开):
![](https://pic2.zhimg.com/v2-baf84aab2e71a0d2fd6eaf6185fa05dd_b.webp?consumer=ZHI_MENG)
在设置的输入框搜索:Shell:windows;找到:Terminal>Integrated>Shell:windows,这一项点击在settings.json中编辑。
![](https://pic1.zhimg.com/v2-f21def2a391d647005798ee699e39df0_b.webp?consumer=ZHI_MENG)
settings.json将内容修改为:"terminal.integrated.shell.windows": "C:\\tool\\Git\\bin\\bash.exe",其中C:\\tool\\Git是我Git的安装路径。
![](https://pic3.zhimg.com/v2-01c4a244682545ca12dababc4298f29e_b.webp?consumer=ZHI_MENG)
重启编辑器通过快捷键:Ctrl+~ 打开命令工具, 显示如下图既OK。
![](https://pic4.zhimg.com/v2-49601d0683d71cc533694de485e81b53_b.webp?consumer=ZHI_MENG)
四、安装vue-cli
1.为了加快安装效率需要将nodejs的默认镜像库修改为国内的淘宝镜像库(淘宝 NPM 镜像)。
在VSCode中通过命令工具进入nodejs安装目录;
![](https://pic4.zhimg.com/v2-943c9a83709ab484aef20e9cc68e7c2b_b.webp?consumer=ZHI_MENG)
输入命令:npm config set registry https://registry.npm.taobao.org 修改镜像库地址;
![](https://pic1.zhimg.com/v2-742fe423f966a62f66fbb52fb64d7120_b.webp?consumer=ZHI_MENG)
2.通过命令:npm install -g vue-cli 安装vue-cli,安装完成之后通过命令:vue --version 查看版本号,检查vue-cli是否安装正常
![](https://pic4.zhimg.com/v2-e525088cbe87c33d246ea425968ae253_b.webp?consumer=ZHI_MENG)
五、构建项目
1.进入存放项目的文件夹,我这里把项目放在c盘的tool文件夹下的html-project,则输入命令cd /c/tool/html-project
![](https://pic1.zhimg.com/v2-be70a80f202fd878853200e4c451fdf8_b.webp?consumer=ZHI_MENG)
2.运行命令:vue init webpack observer 这里的observer是项目名称可以自己定义
![](https://pic4.zhimg.com/v2-cdd4fd43a2ee26fd090350bb8ec469bb_b.webp?consumer=ZHI_MENG)
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
![](https://pic4.zhimg.com/v2-49b2793112028e147d02d1446c737ad3_b.webp?consumer=ZHI_MENG)
六、运行项目,添加UI库
1.在项目存放目录运行命令:code . 打开项目,
我这里的目录是:/c/tool/html-project/observer ;运行完成后VSCode会新开一个窗口,就是刚刚构建的项目。
![](https://pic3.zhimg.com/v2-cb580ef2535bb008776283b599664246_b.webp?consumer=ZHI_MENG)
![](https://pic3.zhimg.com/v2-801ba24c0b04ed31443011d108ce2712_b.webp?consumer=ZHI_MENG)
2.在项目窗口通过(刚刚的新窗口)快捷键:Ctrl+~ 打开gitbash终端。
![](https://pic3.zhimg.com/v2-8cf1a33385095587dd9f9dcc5f8465fa_b.webp?consumer=ZHI_MENG)
3.这里用VUX UI库举例(官网地址:[VUX - Vue 移动端 UI 组件库](VUX - Vue 移动端 UI 组件库)
),运行命令:npm install vux --save 安装vux UI库。
![](https://pic2.zhimg.com/v2-4f87720f41566193d65e2f8667ecfabd_b.webp?consumer=ZHI_MENG)
4.运行命令:npm run dev 启动项目
![](https://pic4.zhimg.com/v2-0df26ba6c1a14d8f2cb44c9a7268dd6b_b.webp?consumer=ZHI_MENG)
5.打开浏览区输入访问地址:localhost:8080,可以访问则说明项目构建成功。
![](https://pic2.zhimg.com/v2-9879743b2975c156b36c08a93f705d2d_b.webp?consumer=ZHI_MENG)