vue开发环境搭建

一、开发环境配置

Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

 

1. Homebrew

Homebrew（是Mac OS x下的软件包管理工具，可以安装，卸载，更新，查看，搜索等功能）

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

安装成功后可通过 brew -v 查看版本

 

1. python2

node.js 依赖于 python2 的开发环境（mac系统默认安装了python2）

 

1. node.js + npm

Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/

brew install nodejs

安装成功后，查看node.js的版本

node -V

npm -V

可选：由于npm包含的很多依赖包是部署在国外的，可以选择安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就比较快，但是也有人说安装的包可能有问题

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

也可以直接使用淘宝镜像地址

npm config set registry=https://registry.npm.taobao.org

获取node.js模块安装目录访问权限

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

 

1. vue-cli

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

# 使用淘宝镜像

npm config set registry=https://registry.npm.taobao.org

# 全局安装vue-cli脚手架

npm install -g vue-cli

# 项目初始化及常用命令

# 初始化项目，并命名为Vue-Project，可自定义

vue init webpack Vue-Project

cd Vue-Project

# 安装项目依赖包，新建 node_modules 文件夹

npm install

# 项目启动

npm run dev

# 项目打包

npm run build

 

安装成功后，查看vue的版本

vue -V

 

1. vue-devtools for Chrome

参考http://www.cnblogs.com/alice-fee/p/8038367.html

 

git clone https://github.com/vuejs/vue-devtools

cd vue-devtools

npm install

npm run build

 

打开Chrome浏览器，打开扩展程序页面chrome://extensions/，勾选开发者模式，然后点击加载已解压的扩展程序，选择文件夹./vue-devtools/shells/chrome确定即可。

 

 

1. 其他模块及插件安装

项目初始化之后，安装 vue 路由模块vue-router和网络请求模块axios vue-axios和vuex 

  npm install vue-router axios vue-axios vuex --save