Vue 开发环境搭建（Mac 版）

Vue 开发环境搭建（Mac 版）

参考:
https://www.jianshu.com/p/cc722eba1f46
https://www.runoob.com/w3cnote/vue2-start-coding.html
https://www.cnblogs.com/wenjunwei/p/10078460.html

安装依赖

1. 安装 Brew

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

安装成功后，查看一下 brew 的版本信息：

brew -v

brew 基本用法

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

2、安装 node.js

brew install nodejs

如果报错也可以下载后安装：
下载地址：https://nodejs.org/en/download/

安装成功后，查看一下 node.js 的版本信息：

node -v

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

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

npm 基本使用：

npm install  <package>        # 本地安装
npm install  <package>   -g   # 全局安装
npm list –g                   # 查看所有全局安装的模块
npm uninstall  <package>      # 卸载模块
npm update     <package>      # 更新模块
npm --registry=xxx install    # 临时使用指定仓库安装依赖

npm install 可简写为 npm i

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

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

4、安装镜像 （npm）【可选】

• 淘宝镜像

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

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

• 京东镜像

npm install -g nrm --registry=http://registry.m.jd.com

cnpm、nrm 用法和 npm 相同。

5. 配置镜像（源） 【可选】

源列表

• 官方仓库：https://registry.npmjs.org/
• 京东仓库：http://npm.m.jd.com 或 http://registry.m.jd.com
• 淘宝仓库：https://registry.npm.taobao.org

查看源

可以看到设置过的所有的源

npm config get registry

设置源

设置npm的源，可以设置多个源，但只有最后一个生效

//设置淘宝镜像源npm config set registry https://registry.npm.taobao.org//设置京东的私源npm config set registry http://registry.m.jd.com

或者直接修改配置文件

编辑 ~/.npmrc 加入下面内容

registry = http://npm.jd.com/

安装 nrm 管理多个源

• 添加源，源别名限制两个字符

nrm add np https://registry.npmjs.org/nrm add jd http://registry.m.jd.com/nrm add tb https://registry.npm.taobao.org/

可查看 ~/.nrmrc 文件确认是否添加成功

• 切换源

nrm use npnrm use jdnrm use tb

可查看 ~/.npmrc 文件确认是否切换成功

6、安装 webpack

npm install webpack -g或(npm 可换成 cnpm、nrm, 下同)cnpm install webpack -g

7、安装 vue 脚手架

npm install vue-cli -g

8、安装 serve 工具

npm install serve -g

9、根据模板创建项目

# 选一个工作目录cd $workspace# 创建项目vue init webpack-simple 工程名字<工程名字不能用中文># 如下vue init webpack-simple demo1

会有一些初始化的设置，如下输入:

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
? Project name (vue-test)直接回车默认
? Project description (A Vue.js project) 直接回车默认
? Author 写你自己的名字
? License MIT
? Use sass? Yes

cd 命令进入创建的工程目录

cd demo1

注意：最后三步都是要进入到当前工程目录后执行的。

10、安装项目依赖

npm install

11、安装 vue 路由模块vue-router和网络请求模块vue-resource

npm install vue-router vue-resource --savenpm install vue-router vue-resource --save-dev

12、启动项目

npm run dev

上述命令中的dev为待启动的配置实例，具体项目中有哪些配置，可参考项目根目录下的package.json的scripts配置。

以下为 vue-test demo 工程的部分配置：

  "scripts": {    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"  }

或者先 build 后 serve

npm run buildcd buildserve

13、问题记录

1. npm install Maximum call stack size exceeded

删除node_module文件夹和package-lock.json文件，再重新npm install

sudo rm -rf node_modules package-lock.jsonsudo npm install

2. npm install less-loader 报错 Could not resolve dependency: peer less@"^2.3.1 || ^3.0.0" from less-loader@4.1.0

使用命令： npm install less-loader -D --legacy-peer-deps