【Vue篇】mac上Vue 开发环境搭建、运行Vue项目（保姆级）

概要介绍

首先，了解一下，Vue 的整体开发环境。

• Homebrew：Mac 系统下的包管理器，类似于 Linux 下的 apt-get，Windows 的控制面板 - 安装删除程序
• Node.js： JavaScript 运行环境（runtime），不同系统之间不能直接运行各种编程语言，Runtime类似于各国会议上的同声传译
• npm： Nodejs 下的包管理器，类似于 Mac 下的 Homebrew
• webpack： Vue的组件都是通过 .vue 或者像微信小程序的.wxml 和.wcss 等自定义的，组件都无法被用户通过各种浏览器解析，需要被翻译打包成 js文件
• vue-cli： 用来生成模版的 Vue 工程，相当于按照设计好的图纸来盖房子

  使用终端安装Vue运行环境

  1、安装 Homebrew

  Homebrew是osx下面最优秀的包管理工具,没有之一。先在终端查看是否已安装brew

  brew -v 

  如果返回 Homebrew 的版本号 例如：Homebrew 1.3.6 那么恭喜你，可以跳过这一步，如果没有，则执行第一步。

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

  2、安装 node.js

  附加：切换node版本可参该文章：（node版本不一致会导致依赖包不同）

  brew install nodejs

  如果为了避免使用brew命令经常出错的情况，可以采用手动安装　　

  下载地址：https://nodejs.org/en/download/ （选择mac os）

  验证：

  由于node安装的时候就自带npm了。如果出现版本信息，就说明安装成功了。

  node -v #查看node版本npm -v #查看npm版本

  3、 获取nodejs模块安装目录访问权限 （必须执行）

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

  然后输入用户密码即可（由于是sudo）

  4、安装 淘宝镜像 （cnpm）

  使用sudo目的是npm安装在了/usr/local/lib下，没有对应的操作权限

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

  5、安装webpack

  sudo cnpm install webpack -g

  注意：使用上面语法执行npm run dev 可能报错!

  解决方法：MAC电脑出现 .bin/webpack-dev-server permission denied 提示权限问题,为了避免出现这个问题你可以采取下面语法

  sudo cnpm install webpack-dev-server -g 

  6、安装vue脚手架

  npm下载速度比较慢，目前cnpm已经成功替代npm

  sudo cnpm install -g vue-cli

  可以使用下面命令进行查看结果：

  vue list

  7、安装项目依赖

  首先，如果已经有vue项目，则进入项目根目录 ，安装项目依赖

  cnpm install　

  如果没有Vue项目，则可参考这篇文章下载vue项目：

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

  cnpm install vue-router vue-resource --save

  9、启动项目

  npm run dev或cnpm run dev

  cnpm run dev 后面的dev在项目中表示的是dev环境，是在package.json文件里面，scripts字段定义的对象脚本，当然了，还可以有其他的环境，不同的环境对应的配置不同，在各境上运行只需要执行对应的命令即可。（可能有的是cnmp run sever，根据自己项目的配置启动即可）