Vue+VSCode开发环境搭建

时间2019.9月

1. 安装 nodeJS; 安装VScode

安装好nodeJS之后,默认会安装好npm

测试 nodeJS 和npm是否可以执行

node -v
npm -v

1.1 VScode 相关插件安装

 ESLint 1.9.1;  LiveServer 5.6.1 (2019.9)  open in browser 2.0.0 ;   Vetur 0.22.3

2. 改变nodeJS原有的环境变量,即改变nodeJS全局安装模块的默认目录, 便于管理

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"

 完成后可以在文件夹中看到相应名字的文件夹 参考

2.1  在系统环境变量添加NODE_PATH,输入路径为之前指定的目录： D:\Program Files\nodejs\node_global, 作用是使nodeJS引擎可以找到需要的模块

2.2  以后当执行 npm install xxx -g 安装全局模块时,JS模块会安装到这个位置

3. 安装cnpm

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

3.1  在系统变量 path 设置 2步骤中的路径, 因为cnpm会被安装到D:\Program Files\nodejs\node_global下,以便 快速执行cnpm

检查cnpm是否安装

cnpm -v

4. 安装 Vue模块 和 vue-cli

npm install -g vue //这里选择全局安装模块
npm install -g vue-cli //cnpm 也可以, 当然Vue的官方手册说,新手不建议直接使用所谓的脚手架方式搭建vue应用目录

4.1 检查所安装vue的版本   vue -V //是大写的V 

5. 初始化Vue工程 参考  (怎样在服务器端运行项目)

vue init webpack projectName //可以将webpack改成 webpack-simple试试,可以帮助理解这个参数的作用,不知道可以baidu

5.1 安装项目依赖和运行项目

cd projectName   //进入文件目录              
npm install     //初始化安装依赖
npm run dev   　//运行，在浏览器打开http://localhost:8080，则可以看到欢迎页了。

 tip

快速搭建vue项目

tip1. 安装淘宝npm

npm install -g cnpm –-registry=https://registry.npm.taobao.org   //同上

修改npm的registry为淘宝镜像 有3种方式 参考

npm config set registry https://registry.npm.taobao.org //改成淘宝镜像
npm info underscore （如果上面配置正确这个命令会有字符串response）

//不想用他们的，再设置回原来的就可以了：
npm config set registry https://registry.npmjs.org 

检查npm安装镜像源

npm config get registry

tip2:如何更新npm至最新版本

npm install npm @latest -g //可以更新npm至最新版本
其中 @ 符号后面可以添加你想更新到的版本号。

tip3: 要使用