Vue2.0 新手入門 — 從環境搭建到釋出
什麼是 Vue
Vue 是一個前端框架，特點是
資料繫結
比如你改變一個輸入框 Input 標籤的值，會自動同步更新到頁面上其他繫結該輸入框的元件的值

元件化
頁面上小到一個按鈕都可以是一個單獨的檔案.vue，這些小元件直接可以像樂高積木一樣通過互相引用而組裝起來
Vue2.0 推薦開發環境
Homebrew 1.0.6(Mac)、Node.js 6.7.0、npm 3.10.3、webpack 1.13.2、vue-cli 2.4.0、Atom 1.10.2
環境安裝
Mac OS系統安裝 brew
開啟終端執行以下命令:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Mac OS系統安裝 nodejs
brew install nodejs
用 npm install [email protected] 更新 npm 版本報錯:
(node:42) fs: re-evaluating native module sources is not supported.
解決辦法:
在官網下載6.70的安裝包再安裝一次(剛剛相當於幫你配置好環境變數，現在再安裝一次升級到最新的 npm)
- 好像以前官網的安裝包不會自動配置環境變數的，由於我電腦上之前安裝過 nodejs 所以環境變數已經配置好了，不知道現在的安裝包會不會自動配置環境變數。
Windows 下直接下載安裝包即可
linux 下可以使用 apt-get（ubuntu） 或 yum（centos） 命令安裝。
獲取nodejs模組安裝目錄訪問許可權
sudo chmod -R 777/usr/local/lib/node_modules/
安裝淘寶映象
大家都知道國內直接使用 npm 的官方映象是非常慢的，這裡推薦使用淘寶 NPM 映象。
npm install -g cnpm--registry=https://registry.npm.taobao.org
這樣就可以使用 cnpm 命令來安裝模組了：
cnpm install [name]
安裝webpack
cnpm install webpack -g
安裝vue腳手架
npm install vue-cli -g
在硬碟上找一個資料夾放工程用的，在終端中進入該目錄
cd 目錄路徑
根據模板建立專案
vue init webpack-simple 工程名字<工程名字不能用中文>
或者建立 vue1.0 的專案
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
會有一些初始化的設定，如下輸入:
Target directory exists. Continue? (Y/n)直接回車預設(然後會下載 vue2.0模板，這裡可能需要連代理)
Project name (vue-test)直接回車預設
Project description (A Vue.js project) 直接回車預設
Author 寫你自己的名字
cd 命令進入建立的工程目錄
工程目錄如圖所示:
安裝專案依賴
一定要從官方倉庫安裝，npm 伺服器在國外所以這一步安裝速度會很慢。
npm install
不要從國內映象cnpm安裝(會導致後面缺了很多依賴庫)
cnpm install
安裝 vue 路由模組vue-router和網路請求模組vue-resource
cnpm install vue-router vue-resource --save
啟動專案
npm run dev
填坑(以下坑可能由於 vue2.0 導致其他相關編譯打包工具沒更新導致的)
【重點】後來發現這些坑是由於 npm 不是最新的版本3.10.2， 用 npm 3.9.5就會出現以下坑
解決辦法: 請執行以下命令
npm update -g
報錯
Error:Cannot find module'opn'Error:Cannot find module'webpack-dev-middleware'Error:Cannot find module'express'Error:Cannot find module'compression'Error:Cannot find module'sockjs'Error:Cannot find module'spdy'Error:Cannot find module'http-proxy-middleware'Error:Cannot find module'serve-index'
如果你用的是老版本的 vue-cli 還可能報其他錯誤，需要更新一下 vue-cli
npm update vue-cli
然後可以檢視一下當前全域性 vue-cli 的版本
npm view vue-cli
安裝一下這個依賴到工程開發環境
cnpm install opn --save-dev cnpm install webpack-dev-middleware --save-dev cnpm install express --save-dev cnpm install compression --save-dev cnpm install sockjs --save-dev cnpm install spdy --save-dev cnpm install http-proxy-middleware --save-dev cnpm install serve-index --save-dev cnpm install connect-history-api-fallback --save-dev
再啟動專案，報錯
ERROR in./src/main.js Module build failed:Error:Cannot find module'babel-runtime/helpers/typeof' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module.require(module.js:468:17) at require(internal/module.js:20:19) at Object.<anonymous>(/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.[email protected]-core/lib/transformation/file/index.js:6:16) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3)@ multi main ERROR in./~/[email protected]/client/socket.js Modulenot found:Error:Can't resolve 'sockjs-client' in '/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.[email protected]-dev-server/client' @ ./~/[email protected]/client/socket.js 1:13-37 @ ./~/[email protected]/client?http://localhost:8080
安裝一下 babel-runtime
cnpm install babel-helpers --save-dev
啟動專案，再次報錯
Module build failed:Error:Cannot find module'babel-helpers'Module build failed:Error:Cannot find module'babel-traverse'Module build failed:Error:Cannot find module'json5'Module build failed:Error:Cannot find module'babel-generator'Module build failed:Error:Cannot find module'detect-indent'Module build failed:Error:Cannot find module'jsesc'
找不到依賴那就再安裝一下
cnpm install babel-helpers --save-dev cnpm install babel-traverse --save-dev cnpm install json5 --save-dev ...不寫了，請把全部把舊的環境全部清除，更新到最新版本
解決辦法概述
遇到
Module build failed:Error:Cannot find modu