mac系统下搭建Vue开发环境，配置运行Webstorm
系统：MacOS
参考：
搭建环境https://my.oschina.net/u/2464371/blog/3039914
pathhttps://www.codenong.com/11025980/
创建项目https://segmentfault.com/a/1190000007441374
一、搭建Vue开发环境
Vue.js是一套构建用户界面的渐进式框架。
1、安装Node.js（附带npm）
Node.js就是运行在服务端的 JavaScript。
1.1 官网下载安装Node.js：https://nodejs.org/en/download/
1.2 设置npm（随NodeJS一起安装的包管理工具）的默认安装路径和缓存路径
# 查看用户配置
npm config ls
npm config list
# 查看全部配置
npm config ls -l
npm config list -l
默认npm包安装目录为prefix = "/usr/local"，因为安装时有可能出现权限不够无法安装。
-
修改npm安装程序时的默认位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"
-
设置npm安装程序时的缓存位置npm config set cache "/xxx/xx" 缓存的默认位置为cache = "/Users/danni/.npm"，在用户下，不存在权限问题，因此也可以不修改。
-
然后在把"/Users/danni/.nodejs"路径添加到环境变量PATH中
cd
vi .bash_profile
export NODE_HOME="/Users/danni/.nodejs"
export PATH=":$NODE_HOME/bin:$CNPM_HOME/bin:$M2_HOME/bin:$PATH"1.3 测试node安装：
打开终端，输入node，出现>交互命令行，然后可以输入console.log("Hello,World");测试安装。 返回Hello,World和undefined表示成功。
> console.log("Hello,World");
Hello,World
undefined
输入.exit退出node，查看node和npm的版本。
node -v
npm -v2、安装cnpm
默认的npm包下载地址为registry = "registry https://registry.npmjs.org"，在国外，速度较慢，可以用阿里定制的cnpm命令行工具代替默认的npm。
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
# 修改配置为cnpm
npm config set registry http://registry.cnpmjs.org
# 复原
#npm config set registry https://registry.npmjs.org
可查看配置是否已修改
npm config ls
用户的配置会保存在/Users/danni/.npmrc文件中
cnpm -v测试是否安装成功
3、安装vue-cli
4、安装vue和vuex
cnpm install vue
cnpm install vuex
5、安装vue-cli脚手架
cnpm install vue-cli -g
6、配置环境变量
刚才已配置export NODE_HOME="/Users/danni/.nodejs"，确认/Users/danni/.nodejs/bin下有vue等执行文件即可。
DannideMacBook-Pro:bin danni$ ls
cnpm vue vue-init vue-list
7、查看版本，测试Vue是否搭建成功
vue -V
注意：V为大写；此为vue-cli版本，非vue版本。
二、安装IDE(如：VSCode or WebStorm)
官网下载
- https://code.visualstudio.com
- https://www.jetbrains.com/webstorm/
注：webstorm没有社区版，需购买，目前如个人有开源软件，可向JetBrains申请一年的License，一年后再续期。
三、导入工程项目
1、把vue_web项目导入IDE
打开VSCode/webstorm，File - Open打开即可。
2、安装项目
在项目所在目录下执行命令，生成node_modules目录。
cnpm install
3、运行项目
方法一：
- 在项目所在目录下执行命令。
cnpm run dev- 控制台输出访问地址，比如：http://localhost:8081
方法二：
- webstorm中配置Run - Edit Configurations - Add new configuration
- 选择npm，package-.json选择项目中的package.json，script填写dev
- 然后点击Run
4、访问测试
- 根据控制台输入地址访问
- 如：http://localhost:8081
5、打包项目
npm run build
打包后生成dist目录。
注意：提交代码时，不要上传node-modules、dist文件夹目录下的内容
常用包安装
可先安装，防止后续使用时缺少。如：
- 单元测试mocha：
cnpm install -g mocha - express框架：
cnpm install -g express - 等等