Vue.js开发环境搭建说明（mac）

2019独角兽企业重金招聘Python工程师标准>>>

vue开发环境搭建（mac）

投影放大：cmd + +

安装Node

下载Node

官网下载 https://nodejs.org/en/download/

安装Node

双击安装包，选择安装目录，比如： /usr/local/bin

安装成功后最好记录一下安装目录

•	Node.js v10.13.0 to /usr/local/bin/node
•	npm v6.4.1 to /usr/local/bin/npm

测试Node安装

测试是否安装成功。 打开终端，输入node，出现>交互命令行，然后可以输入console.log("Hello,World");测试安装。 返回​Hello,World和undefined表示成功。

> console.log("Hello,World");
Hello,World
undefined

输入.exit退出node，查看node和npm的版本。

node -v
npm -v

设置npm的默认安装路径和缓存路径

# 查看用户配置
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"

​

安装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文件中

安装vue-cli

安装vue和vuex

cnpm install vue
cnpm install vuex

安装vue-cli脚手架

cnpm install vue-cli -g

配置环境变量

刚才已配置export NODE_HOME="/Users/danni/.nodejs"，确认/Users/danni/.nodejs/bin下有vue等执行文件即可。

DannideMacBook-Pro:bin danni$ ls
cnpm		vue		vue-init	vue-list

查看版本

vue -V

注意：V为大写；此为vue-cli版本，非vue版本。

安装IDE(如：VSCode or WebStorm)

官网下载

• https://code.visualstudio.com
• https://www.jetbrains.com/webstorm/

注：webstorm没有社区版，需购买，目前如个人有开源软件，可向JetBrains申请一年的License，一年后再续期。

导入工程项目

把vue_web项目导入IDE

打开VSCode/webstorm，File - Open打开即可。

安装项目

在项目所在目录下执行命令，生成node_modules目录。

cnpm install

运行项目

方法一：

• 在项目所在目录下执行命令。
• cnpm run dev
• 控制台输出访问地址，比如：http://localhost:8081

方法二：

• webstorm中配置Run - Edit Configurations - Add new configuration
• 选择npm，package-.json选择项目中的package.json，script填写dev
• 然后点击Run

访问测试

• 根据控制台输入地址访问
• 如：http://localhost:8081

打包项目

npm run build

打包后生成dist目录。

注意：提交代码时，不要上传node-modules、dist文件夹目录下的内容

常用包安装

可先安装，防止后续使用时缺少。如：

• 单元测试mocha：cnpm install -g mocha
• express框架：cnpm install -g express
• 等等

转载于:https://my.oschina.net/u/2464371/blog/3039914