在mac上配置vue开发环境

在mac配置vue开发环境基本流程如图1所示

 

1. 在mac上安装brew

brew 是 Mac 下的一个包管理工具，作用类似于 centos 下的 yum。

brew 可以用一条命令，就可以在mac上安装、卸载、更新各种软件包，因为brew的使用方便，如今已成为使用mac电脑的程序员的必备工具

如果mac没有安装brew，执行下面的命令安装

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果提示curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

 

 

dd就输入指令sudo gem install redis，再输入安装brew指令即可。

brew基本用法：

brew install <package>   # 安装指定包
brew upgrade <package>   # 更新指定包
brew remove  <package>   # 卸载指定包

如果需要安装指定版本的软件，执行 brew search 查看有没有需要的版本。在 @ 后面指定版本号，例如 brew install thrift@0.9

2. 安装notejs

使用brew安装notejs

brew install nodejs 

也可以使用二进制安装，下载地址：

Download | Node.js​nodejs.org

安装完毕后，执行以下命令查看nodejs的版本

apple@apple ~ % node -v
v12.16.3

获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

npm是随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于可以通过输入“ npm -v”来测试是否成功安装。

apple@apple ~ % npm -v
6.14.5

npm基本使用：

npm install  <package>        # 本地安装
npm install  <package>   -g   # 全局安装
npm list –g                   #查看所有全局安装的模块
npm uninstall  <package>      # 卸载模块
npm update     <package>      # 更新模块

但npm用国外的服务器，速度比较慢，淘宝提供了一个cnpm命令，可以从淘宝镜像下载，淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。安装淘宝镜像：

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

cnpm用法和npm相同。

3. 安装webpack

cnpm install webpack -g

4. 安装vue脚手架

cnpm install vue-cli -g

5.创建vue项目

到指定目录下，创建vue项目

# 命令格式：vue init webpack 工程名字<工程名字不能用中文>

vue init webpack axf

 

图2 vue创建项目