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"，因为安装时有可能出现权限不够无法安装。

1. 修改npm安装程序时的默认位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"

2. 设置npm安装程序时的缓存位置​npm config set cache "/xxx/xx" 缓存的默认位置为cache = "/Users/danni/.npm"，在用户下，不存在权限问题，因此也可以不修改。

3. 然后在把"/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 -v

2、安装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
• 等等