VUE环境搭建 Mac

一、首先需要安装必要的软件

• Homebrew ：Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件
• Node.js：JavaScript运行环境(runtime)
• npm:    node.js下的包管理器，NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用
• webpack : vue的组件都是.vue或者像微信小程序的.wxml或者.wxss等自定义组件都无法被用户端的浏览器解析,需要编译和打包成js文件       
• vue-cli ：用来生成模板的Vue工程

二、安装软件的

• 安装homebrew

    1、打开终端运行命令：

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

     2、终端下面运行如下命令：如果显示版本信息就说明安装成功啦

brew -v

• 安装node.js（提供JavaScript的运行环境）

   1、安装了brew后，打开终端输入命令：

brew install nodejs

  2、终端下面运行如下命令：如果显示版本信息就说明安装成功啦

node -v

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

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

• 安装 淘宝镜像 （npm）

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

• 安装webpack

cnpm install webpack -g

•    安装vue脚手架

cnpm install vue-cli -g

• 在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

• 根据模板创建项目

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

     创建项目的时候的一些初始化设置：

     ? Project name my-project
     ? Project description A Vue.js project
     ? Author runoob <test@runoob.com>
     ? Vue build standalone
     ? Use ESLint to lint your code? Yes
     ? Pick an ESLint preset Standard
     ? Setup unit tests with Karma + Mocha? Yes
     ? Setup e2e tests with Nightwatch? Yes

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

cd demo1

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

• 安装项目依赖

cnpm install

比较慢，需要有点耐心……

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

cnpm install vue-router vue-resource --save

• 启动项目

npm run dev