博客

因为项目要用Vue,所以被迫开始玩Vue,安装环境的文章比较少，我自己搭建Vue开发环境的时候顺便记录了一下安装步骤，供大家使用。

1、安装nodejs 下载地址：

Node.js

2、配置nodejs，在NodeJs下建立”node_global”及”node_cache”两个文件夹，然后执行

npm config set prefix "C:\tools\nodejs\node_global" 
npm config set cache "C:\tools\nodejs\node_cache" 
//国外的镜像站比较慢，可以设置淘宝镜像，也可以不设置，后面还有另外的处理办法
npm config set registry http://registry.npm.taobao.org/ 
//设置原镜像
npm config set registry https://registry.npmjs.org/

*cmd需要用管理员身份打开

3、配置环境变量，在“我的电脑”上右击鼠标，在弹出菜单中选择“属性”，选择“高级系统设置”，选择“环境变量”

//增加NODE_PATH
NODE_PATH=C:\tools\nodejs\node_global\node_modules
//修改PATH，增加
PATH=$PATH;C:\tools\nodejs\node_global

4、除了设置npm镜像为淘宝镜像的方式之外，安装淘宝cnpm命令来访问淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v

5、安装vue-cli脚手架

cnpm install --global vue-cli vue -V

6、安装yarn ，后面vue-devtools需要

npm install -g yarn 
//设置yarn
yarn config set global-folder "C:\tools\nodejs\yarn_global" 
yarn config set cache-folder  "C:\tools\nodejs\yarn_cache" 
//设置yarn为淘宝镜像 
yarn config set registry http://registry.npm.taobao.org/ 
//设置yarn为原配置 
yarn config set registry http://registry.npmjs.org/

7、安装vue-devtools，可以使用我的已经打好的安装包（免积分下载的），如果想自己玩一下，安装方法如下

chrome插件Vuedevtools6.2.1安装包-Javascript文档类资源-CSDN下载

7.1、下载并解压vue-devtools包

https://github.com/vuejs/devtools/releases

7.2、使用eclipse或者IntelliJ IDEA加载工程，大家都会，不详细说了

7.3、本人用的是 IDEA，在终端里执行yarn ，第一次会下载很多包，比较慢，还有可能连接失败，耐心等待一下，失败就重新执行yarn，看到下面就代表成功了

yarn 
... 
success Already up-to-date. Done in 0.58s.

7.4、执行yarn run build ,看到success，就代表成功了

yarn run build 
//waiting... 
lerna success - @vue-devtools/shell-chrome

7.5、打包完成后，需要修改一下packages\shell-chrome目录manifest配置文件

"persistent": false 修改为 "persistent": true

7.6、打开chrome浏览器，在扩展程序页面，打开“开发者模式”按钮

7.7、点击“加载已解压的扩展程序”，选择devtools代码目录下packages\shell-chrome的目录 （不打开），点击选择文件夹，就会加载成功。

7.8、可以打开VUE的网站：

介绍 — Vue.js

来验证，是否安装成功，灰色变成绿色则安装成功。建议把这个钉起来，方便用

8、Visual Studio Code 开发VUE环境

8.1 下载安装Visual Studio Code，下载地址：

Visual Studio Code – Code Editing. Redefined

8.2 插件安装建议，网络上收集的，我也没有全用，大家可以自己挑着来

Vetur —— 语法高亮、智能感知、Emmet等 
EsLint ——  检查代码是否符合规范 
Auto Close Tag —— 自动闭合HTML/XML标签 
Auto Rename Tag —— 自动完成另一侧标签的同步修改 
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入 
Path Intellisense —— 自动路径补全 
HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式 
Beautify —— 美化 javascript, JSON, CSS, Sass, 以及 HTML 。一般需要配合.jsbeautifyrc使用 Bracket Pair Colorizer —— 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 
open in browser —— 直接右键项目单击启动 
Material Icon Theme —— 多样化的文件图标 
Vue VSCode Snippets —— Vue 语法片段扩展 
One Dark Pro —— 一款深黑色的主题 
npm Intellisense —— import、require npm模块是自动补全 
Chinese (Simplified) (简体中文) Language Pack —— 适用于 VS Code 的中文（简体）语言包 
live server —— 可以在本地启动一个小的服务器，使用服务器访问页面，调试页面很方便