文章目錄：
一、技術(shù)準(zhǔn)備
二、開發(fā)工具
三、使用 vue-cli 快速開始模板項(xiàng)目
四、給項(xiàng)目添加組件
五、使用vue-router添加路由功能
六、使用axios請(qǐng)求數(shù)據(jù)
七、引入第三方UI庫
八、更多的Vue

Vue.js做為目前前端最熱門的庫之一，為快速構(gòu)建并開發(fā)前端項(xiàng)目多了一種思維模式。本文通過一個(gè)簡單的實(shí)例開始上手Vue.js開發(fā)。

一、技術(shù)準(zhǔn)備

使用傳統(tǒng)mvc項(xiàng)目的開發(fā)人員，筆者建議在開始項(xiàng)目前，對(duì)以下兩個(gè)技術(shù)點(diǎn)進(jìn)行了解。

1、 Vue.js基礎(chǔ)知識(shí) Vue.js特點(diǎn)就是入門簡單，api 簡潔一致，文檔清晰。對(duì)于了解Html,CSS,JavaScript花幾個(gè)小時(shí)看一遍，就能掌握基礎(chǔ)的東西。 可參考http://www.runoob.com/vue2/vue-tutorial.html。

2、 ES6的模塊化加載 有ES6中，可以不使用SeaJS或者RequireJS，而直接使用import和export在瀏覽器中導(dǎo)入和導(dǎo)出各個(gè)模塊了， 具體使用參考http://www.cnblogs.com/diligenceday/p/5503777.html。

二、開發(fā)工具

工欲善其事必先利其器，開發(fā)Vue項(xiàng)目建議使用“屬于21世紀(jì)”的代碼編輯器——sublime，它提供了代碼智能提示，智能補(bǔ)全等功能?？傊褪歉又悄芎捅憬荩蟠筇嵘碎_發(fā)效率。個(gè)人覺得Webstorm相對(duì)更加智能一點(diǎn)，但感覺并不簡潔，我的電腦運(yùn)行Webstorm就有卡頓現(xiàn)象，但是Sublime相對(duì)輕巧靈活，界面清爽，功能也一應(yīng)俱全。具體的功能比較多，你可以自己親自使用試試，下載地址是：http://www.sublimetext.com/

三、使用 vue-cli 快速開始模板項(xiàng)目

vue-cli：Vue的腳手架，用于自動(dòng)生成Vue.js項(xiàng)目相關(guān)文件。

1、安裝 vue 腳手架

cnpm install vue-cli -g

2、使用 vue-cli 初始化項(xiàng)目

cd 目錄路徑
vue init webpack-simple first-vue /  vue init webpack vue-demo

• Project name :項(xiàng)目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫，所以我把名稱改成了vueclitest
• Project description:項(xiàng)目描述，默認(rèn)為A Vue.js project,直接回車，不用編寫。
• Author：作者，如果你有配置git的作者，他會(huì)讀取。
• Install vue-router? 是否安裝vue的路由插件，我們這里需要安裝，所以選擇Y
• Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯(cuò)誤和風(fēng)格。我們這里不需要輸入n（建議），如果你是大型團(tuán)隊(duì)開發(fā)，最好是進(jìn)行配置。
• setup unit tests with Karma + Mocha? 是否需要安裝單元測(cè)試工具Karma+Mocha，我們這里不需要，所以輸入n。
• Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測(cè)試，我們這里不需要，所以輸入n。

文件樹結(jié)構(gòu)如下：

├─src                  // 開發(fā)目錄
│ ├─assets             // 資源文件目錄，需要打包的放到該目錄下
│ │ ├─logo.png │
│ ├─App.vue            // App.vue組件
│ ├─main.js 　　       // 預(yù)編譯入口
├─.babelrc 　　        // babel配置文件
├─.gitignore
├─index.html 　　      // 主頁
├─package.json 　    　// 項(xiàng)目配置文件
├─README.md
├─webpack.config.js   // webpack配置文件</pre>

3、安裝項(xiàng)目依賴

進(jìn)入項(xiàng)目目錄后使用npm或者cnpm(淘寶鏡像)、yarn

cd first-vue
npm install 或 cnpm install

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

由于vue.js不支持ie8，建議默認(rèn)瀏覽器使用chrome，自動(dòng)啟動(dòng)瀏覽器就會(huì)看到這個(gè)界面了。

安裝成功

5、發(fā)布項(xiàng)目

執(zhí)行以下命令會(huì)生成發(fā)布時(shí)的build.js，并且是經(jīng)過壓縮的。

npm run build

這時(shí)候會(huì)在目錄下生成dist文件夾和相關(guān)發(fā)布后的文件，由于使用的是webpack-simple方式打包，不會(huì)生成index.html文件，特別要注意的是index.html 加上 dist 不能采用 file 協(xié)議打開，必須使用 http 協(xié)議打開，并且需要放在 http 服務(wù)的 / 目錄下?？截恑ndex.html到dist文件文件夾并放在本地IIS目錄下，這樣就能訪問了。（關(guān)于webpack的詳細(xì)使用，建議學(xué)習(xí)專門的教程，打包的配置文件在webpack.conifg.js里面，這里暫時(shí)只要知道這樣用就行了）

四、給項(xiàng)目添加組件

1、通過前面的步驟，已經(jīng)在本地跑起了一個(gè)簡單的項(xiàng)目，但這個(gè)項(xiàng)目還太簡單了，現(xiàn)在給它加點(diǎn)新的功能。
2、組件系統(tǒng)是Vue.js其中一個(gè)重要的概念，它提供了一種抽象，讓我們可以使用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹，例如常用的頂部條，底部菜單都就抽象成組件使用。

1、添加文件。

在src目錄下新建components目錄，添加first-component.vue，template 寫 html，script寫 js，style寫樣式

<template>
　　<div id="firstcomponent">
　　　　<h1>標(biāo)題</h1>
　　　　<a> 作者：{{ author }} </a>
　　</div>
</template>
 
<script type="text/javascript">
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　author: "ling"
　　　　　　}
　　　　}
　　}
</script>

<style>
</style>

2、引入。

打開App.vue，引入firstcomponent組件，并刪除vue-cli腳手架生成的一些無意義html。在<script></script>標(biāo)簽內(nèi)的第一行寫

import firstcomponent from './components/firstcomponent.vue'

3、注冊(cè)。

在<script></script>標(biāo)簽內(nèi)的 data 代碼塊后面加上 components: { firstcomponent }。記得中間加英文逗號(hào)

export default {
　　name: 'app',
　　data () {
　　　　return {
　　　　　　msg: 'Welcome to Your Vue.js App'
　　　　}
　　},
　　components: { firstcomponent }
}

4、使用。

在<template></template>內(nèi)加上<firstcomponent></firstcomponent>

<template>
　　<div id="app">
　　　　<img src="./assets/logo.png">
　　　　<h2>{{msg}}</h2>
　　　　<firstcomponent></firstcomponent>
　　</div>
</template>

完成后的代碼：

在瀏覽器上打開 http://localhost:8080/ 頁面(之前打開過就會(huì)自動(dòng)刷新)，這樣就成功在項(xiàng)目中添加了一個(gè)組件。

五、使用vue-router添加路由功能

實(shí)際項(xiàng)目中，由于不同模塊的劃分，需要路由功能，使用vue-router為項(xiàng)目添加路由。注意: vue-router@2.x 只適用于 Vue 2.x 版本。

1、終端安裝 vue-router。

cnpm install vue-router --save

注意參數(shù)--save
　　--save 可以理解成生產(chǎn)環(huán)境，會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下，dependencies是運(yùn)行時(shí)依賴。
　　--save-dev 則是開發(fā)環(huán)境， 添加到 package.json 文件 devDependencies 鍵下，devDependencies是開發(fā)時(shí)的依賴，如生產(chǎn)時(shí)不需要用到壓縮庫應(yīng)該安裝到devDependencies 。

2、src下添加views目錄和頁面文件。

在目錄下面新建兩個(gè)文件，view1.vue和view2.vue。

<template>
    <div >
        <h1>我是View1</h1>
        <a> 我是View1 </a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view1',
    }
</script>
 
<style>
</style>  

<template>
    <div >
        <h1>我是View2</h1>
        <a> 我是View2</a>
    </div>
</template>
 
<script type="text/javascript">
    export default {
        name: 'view2',
    }
</script>
 
<style>
</style> 

3、引入并注冊(cè) vue-router.

添加router.js文件，這里添加了兩個(gè)路由，分別指向view1和view2。

import Vue from 'vue'
import Router from 'vue-router'
import View1 from './views/view1.vue'
import View2 from './views/view2.vue'

Vue.use(Router)
 
export default new Router({
    linkActiveClass: 'active',
    // 路由配置
    routes: [
    {
        path: '/view1',
        component: View1
    }, {
        path: '/view2',
        component: View2
    }, {
        path: '/*',
        component: View1
    }
    ]
})

至此，目錄結(jié)構(gòu)如下：

4、使用router。

修改main.js，引入 router并指定當(dāng)前vue實(shí)例。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

5、添加路由鏈接和出口。

修改App.vue，添加鏈接和出口。

<router-link to="/view1">Go to view1</router-link>
<router-link to="/view2">Go to view2</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>

查看網(wǎng)站，點(diǎn)擊Go to view1和Go to view2，瀏覽器地址發(fā)生了改變，同時(shí)view1和view2的內(nèi)容也渲染在了router-view。

六、使用axios請(qǐng)求數(shù)據(jù)。

至此，我們的項(xiàng)目實(shí)現(xiàn)了路由功能，但這些頁面的數(shù)據(jù)都是靜態(tài)的，下面我們使用axios庫來請(qǐng)求動(dòng)態(tài)數(shù)據(jù)并展示出來。vue更新到2.0之后,作者就宣告不再對(duì)vue-resource更新,而是推薦的axios。

1、終端安裝axios。

cnpm install axios --save

2、引入axios。

修改main.js文件，添加 Vue.prototype.$ajax = axios ，引入axios。

import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'
import router from './router.js'
 
Vue.prototype.$ajax = axios
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

3、在視圖中請(qǐng)求數(shù)據(jù)。

修改view1.vue的js，引入axios，請(qǐng)求服務(wù)器數(shù)據(jù)。

<script type="text/javascript">
import axios from 'axios'
 
export default {
    name: 'view1',
    mounted: function() {
        axios.post('請(qǐng)求接口')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (response) {
                console.log(response);
            });
    }
}
</script> 

axios不支持跨域的jsonp請(qǐng)求

七、引入第三方UI庫。

本文引用的是Element，Element是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。官網(wǎng)： http://element.eleme.io/#/en-US，github：https://github.com/ElemeFE/element。

1、終端安裝Element-ui

cnpm install element-ui --save

2、引入Element。

在 main.js 中寫入以下內(nèi)容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨(dú)引入。

3、修改webpack.config.js。

按照element-ui官網(wǎng)提供的方法在vue中引入element2.0 后報(bào)錯(cuò)如下：

錯(cuò)誤提示說element-icons引用出錯(cuò)，找不到合適的loader，這是因?yàn)閒ile-loader默認(rèn)處理文件格式是不包含'.tff'和'.woff'的; 于是在webpack.config.js中將目錄中的文件格式加上：

然后重新運(yùn)行，這樣就能正確加載了；

八、更多的Vue。

至此，我們已經(jīng)搭建了Vue.js開發(fā)環(huán)境并使用發(fā)布了一個(gè)功能簡單但邏輯完整項(xiàng)目，一些不太復(fù)雜的項(xiàng)目基本可以按步驟來實(shí)現(xiàn)。推薦一些優(yōu)秀的vue.js庫來構(gòu)建更復(fù)雜的工程。

Vuex：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

vue-lazyload：vue-lazyload 一個(gè)簡單易用的 Vue 圖片延遲加載插件 。

更多實(shí)用的vue.js庫： http://www.cnblogs.com/huyong/p/6517949.html。

原文參考：
https://www.cnblogs.com/dreling/p/6892684.html
https://www.zhihu.com/question/37984203
http://www.runoob.com/w3cnote/vue2-start-coding.html
https://www.zhihu.com/question/38213423
https://www.v2ex.com/t/249859

更多精彩請(qǐng)關(guān)注：Vue專題