1. Vue簡介

詳細(xì)內(nèi)容可以參考官網(wǎng)Vue.js

1）兼容性

Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

目前ECMAScript 6已經(jīng)漸漸流行起來，但是有一些瀏覽器還不完全支持，所以在使用ECMAScript 6時(shí)，可以通過Babel轉(zhuǎn)碼器進(jìn)行轉(zhuǎn)換

2）使用方式

（1） 直接用<script>引入

直接在html頁面中引入<script>，Vue 會被注冊為一個(gè)全局變量。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

這個(gè)適合單獨(dú)的H5頁面的使用

（2）命令行工具vue-cli

適合構(gòu)建大型應(yīng)用，配合npm，npm能很好的和webpack等模塊打包器配合使用。

# 全局安裝vue最新版
$ npm install vue

2. 環(huán)境搭建

1）安裝node.js

傻瓜式安裝，官網(wǎng)下載node.js，一路點(diǎn)擊下一步安裝。

打開命令行工具，輸入node -v，如果顯示node 版本號，則表示安裝成功。

注意：官網(wǎng)安裝的node.js后，就已經(jīng)自帶包管理工具npm

2）安裝淘寶鏡像cnpm或是yarn

原因：這一步也可以省略，安裝的理由是npm的服務(wù)器是外國，有時(shí)候我們安裝依賴執(zhí)行的操作超級慢，而cnpm 或是 yarn執(zhí)行的速度較快，特別是在執(zhí)行npm indstall時(shí)，淘寶鏡像cnpm install和yarn相對比較明顯的快。

淘寶鏡像安裝：
打開命令行工具，輸入

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

安裝完后，通過cnpm -v查看版本號來判斷是否安裝成功

yarn
參考官網(wǎng)教程yarn 安裝

注意：推薦使用淘寶鏡像或是yarn，接下來下面都是用淘寶鏡像執(zhí)行的。

3）全局安裝vue-cli

# 全局安裝
cnpm install -g vue-cli

同樣通過命令行工具使用vue -V 查看版本號判斷是否安裝成功

3. 構(gòu)建項(xiàng)目

1）初始化一個(gè)項(xiàng)目

在一個(gè)文件夾下面初始化來新建一個(gè)工程項(xiàng)目，推薦使用git自帶Git Bash Here

# vue init 是vue初始化項(xiàng)目
# webpack 是打包工具，其中也可以使用Browserify，感興趣可以自行研究
# project 是自定義的項(xiàng)目名稱
vue init webpack project

命令執(zhí)行之后，會在當(dāng)前目錄下生成一個(gè)以project命名的項(xiàng)目文件夾。

命令執(zhí)行時(shí)會顯示下列選項(xiàng)：

$ vue init webpack project--------------------- 安裝vue腳手架的命令，采用webpack打包工具，項(xiàng)目名是project
This will install Vue 2.x version of the template. ---------------------這里說明將要?jiǎng)?chuàng)建一個(gè)vue 2.x版本的項(xiàng)目
For Vue 1.x use: vue init webpack#1.0 project
? Project name (project) ---------------------項(xiàng)目名稱
? Project name project
? Project description (A Vue.js project) ---------------------項(xiàng)目描述
? Project description A Vue.js project
? Author wujy--------------------- 項(xiàng)目創(chuàng)建者
? Author wujy
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，推薦安裝，是頁面跳轉(zhuǎn)用的
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規(guī)則，這里個(gè)人建議選no，因?yàn)檫@里有很多的坑，具體以后會講
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) n  ----------------是否安裝單元測試，因人而異，可以自行選擇
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? (Y/n) n  --------------------是否安裝e2e測試，可自行選擇
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "project".
To get started: --------------------- 這里說明如何啟動(dòng)這個(gè)服務(wù)
cd project   --------------------進(jìn)入項(xiàng)目文件夾
npm install   ---------------------安裝依賴，推薦使用淘寶鏡像cnpm
npm run dev  -----------------------項(xiàng)目運(yùn)行

2）運(yùn)行項(xiàng)目

執(zhí)行上述操作之后，可以看到本地多了一個(gè)project文件夾

# 運(yùn)行項(xiàng)目
cd project  ------------進(jìn)入工程目錄
cnpm install  -------------安裝依賴，如果要具體安裝其他模塊可以單獨(dú)使用，具體以后講
# 執(zhí)行之后，目錄里多了一個(gè)node_modules文件夾，這里放的就是所有依賴的模塊
cnpm run dev   ------------運(yùn)行項(xiàng)目
# 打包工作，用于正式環(huán)境
cnpm run build

本地localhost:8080就可以打開一個(gè)HelloWorld.vue，默認(rèn)服務(wù)器啟動(dòng)的是8080端口，當(dāng)然也可以通過更改配置來修改默認(rèn)端口

4. 文件目錄分析

build   -------------------項(xiàng)目構(gòu)建相關(guān)代碼（webpack配置）
    build.js  -------------生產(chǎn)環(huán)境構(gòu)建代碼
    check-versions.js  ----------檢查node、npm等版本
    utils.js  ------------------------構(gòu)建工具相關(guān)
    vue-loader.conf.js  ---------css加載器的配置
    webpack.base.conf.js  ---webpack的基礎(chǔ)配置信息
    webpack.dev.conf.js  -----webpack開發(fā)環(huán)境配置信息，構(gòu)建開發(fā)本地服務(wù)器
    webpack.prod.conf.js  ---wenpack生產(chǎn)環(huán)境配置信息
config  -------------------配置目錄，包括端口號，打包輸出等的vue基本配置文件
    dev.env.js  -----------開發(fā)環(huán)境變量
    prod.env.js -----------生產(chǎn)環(huán)境變量
    index.js  -------------項(xiàng)目的配置變量，端口號等 
node_modules    -----------加載的項(xiàng)目依賴模塊
static  -------------------靜態(tài)資源目錄
index.html  ---------------首頁的入口文件，可以添加meta等參數(shù)
README.md   ---------------項(xiàng)目的說明文檔，makedown格式
src -----------------------源碼目錄，主要的開發(fā)
    assets  ---------------靜態(tài)資源，css,image等可以存放
    components  -----------公共組件
    router  ---------------路由文件夾，配置頁面跳轉(zhuǎn)
    views  ----------------頁面編寫的地方，（可以自行定義命名）
main.js  ------------------入口文件，全局的配置和加載
.babelrc  -----------------ES6語法編譯配置，用來將es6代碼轉(zhuǎn)換成瀏覽器可識別的es5代碼
.gitignore  ---------------git上傳需要忽略的文件的格式
package.json  -------------項(xiàng)目的基本信息，包括開發(fā)所需要的模塊、項(xiàng)目名稱、版本號等
.postcssrc.js  ------------轉(zhuǎn)換css的工具
.editorconfig  ------------定義代碼格式

綜上所述：
詳細(xì)文件的分析可以參考官網(wǎng)vue.js
初次嘗試vue，可以用普通的引入javascript文件的方法。如果有一定的基礎(chǔ)，可以用vue-cli腳手架進(jìn)行進(jìn)階的操作