一、前言
因工作緣故，需要做一個(gè)移動(dòng)端app,面對(duì)2016下半年至今webapp最流行的三個(gè)技術(shù)React,angular,vue，三選一，如何先，經(jīng)過(guò)前期的技術(shù)選型，最后決定使用vue。具體查看本人之前的blog移動(dòng)app技術(shù)選型，react,angular,vue

二、vue開(kāi)發(fā)環(huán)境的搭建
由于本人使用的是mac,所以環(huán)境是windows的下面可以忽略……

通過(guò)下面一張圖對(duì)Vue的整體開(kāi)發(fā)環(huán)境有一個(gè)大體了解：

image.png

注：上面的圖片轉(zhuǎn)自Vue2.0 新手入門(mén) — 從環(huán)境搭建到發(fā)布
本人使用的各個(gè)工具的版本為：
Homebrew 1.2.4
node.js v6.11.1
npm 5.0.3
webpack 3.2.0
Vue 2.8.2

1、安裝brew
打開(kāi)終端運(yùn)行以下命令：

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

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

brew -v

注：我安裝成功后，在查看brew的信息是出現(xiàn)”-bash: brew: command not found”,處理方法：解決mac安裝homebrew后報(bào)錯(cuò)-bash: brew: command not found，還要說(shuō)明一點(diǎn)的是，我沒(méi)有vim去修改那個(gè)文件，我是直接找到那個(gè)文件用文本編輯器直接修改的。

2、安裝node.js
在終端中運(yùn)行以下命令：

brew install nodejs

也可以下載后安裝：
下載地址：https://nodejs.org/en/download/

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

node -v

3、獲取nodejs模塊安裝目錄訪(fǎng)問(wèn)權(quán)限

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

4、安裝 淘寶鏡像 （npm）

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

5、安裝webpack

cnpm install webpack -g

6、安裝vue腳手架

cnpm install vue-cli -g

7、在硬盤(pán)上找一個(gè)文件夾放工程用的，在終端中進(jìn)入該目錄

cd 目錄路徑

8、根據(jù)模板創(chuàng)建項(xiàng)目

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

會(huì)有一些初始化的設(shè)置，如下輸入:
Target directory exists. Continue? (Y/n)直接回車(chē)默認(rèn)(然后會(huì)下載 vue2.0模板，這里可能需要連代理)
Project name (vue-test)直接回車(chē)默認(rèn)
Project description (A Vue.js project) 直接回車(chē)默認(rèn)
Author 寫(xiě)你自己的名字

cd 命令進(jìn)入創(chuàng)建的工程目錄

cd demo1

注意：最后三步都是要進(jìn)入到當(dāng)前工程目錄后執(zhí)行的。

9、安裝項(xiàng)目依賴(lài)

cnpm install

比較慢，需要有點(diǎn)耐心……

10、安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource

cnpm install vue-router vue-resource --save

11、啟動(dòng)項(xiàng)目

npm run dev

參考：
關(guān)于 vue.js 運(yùn)行環(huán)境的搭建（mac）

Vue2.0 新手入門(mén) — 從環(huán)境搭建到發(fā)布

sudo npm 提示 command not found 的解決辦法

mac安裝webpack權(quán)限問(wèn)題處理

解決mac安裝homebrew后報(bào)錯(cuò)-bash: brew: command not found

npm WARN enoent ENOENT: no such file or directory, open ‘E:\Program Files\nodejs \package.json’ npm

學(xué)習(xí)Vue的一個(gè)非常重要的途徑就是Vue官網(wǎng)：

image.png

image.png

燃燒吧，少年！??！

注：學(xué)習(xí)一門(mén)新技術(shù)，最開(kāi)始就是環(huán)境搭建，我反正不是一次成功的，我也相信很多人也不是一次成功的，我是裝了卸，卸了裝。就是按照別人寫(xiě)的文檔，一步一步照做，也會(huì)出現(xiàn)莫名其妙的錯(cuò)誤和問(wèn)題。不管是windows還是mac都會(huì)有各種坑，mac的坑會(huì)多些，這就需要我們有更多的耐心，多試幾次，碰到報(bào)錯(cuò)，多看幾眼報(bào)錯(cuò)的日志，多搜索幾篇報(bào)錯(cuò)相關(guān)的文章，多看幾遍別人處理問(wèn)題的方法。下載或在線(xiàn)安裝相關(guān)工具、軟件、插件時(shí)，也不要著急，網(wǎng)還慢，我們更要有耐心的去等。最后，通過(guò)我們的耐心，對(duì)技術(shù)原本的敬畏、虔誠(chéng)的心態(tài)，一定會(huì)搞定的。

另，推薦Vue作者在weibo中推薦的Vue源碼學(xué)習(xí)（或分析）的文章：Vue2.1.7源碼學(xué)習(xí)

還有就是windows下vue環(huán)境搭建參考作者充電實(shí)踐的文章：windows下搭建vue開(kāi)發(fā)環(huán)境