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

 

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

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

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

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

 

　　二、開發(fā)工具

　　工欲善其事必先利其器，開發(fā)Vue項目建議使用“屬于21世紀(jì)”的代碼編輯器——Atom，它開源免費而且是跨平臺的，基于 WEB 技術(shù)（Chromium+Node.js）開發(fā)的，簡單理解的話編輯器本身其實是一個跑在本地的網(wǎng)頁，用戶可以用Javascript來編寫編輯器插件，缺點就是基于WEB導(dǎo)致性能不是很理想，但這不影響筆者對它的愛，Atom好用，而且有大量的高亮提示，語法插件可使用 ，當(dāng)然你也可以通過安裝插件使用宇宙第一IDE-VisualStudio進行開發(fā)。使用Atom建議安裝以下插件。

　　1、minimap 讓你了解當(dāng)前屏幕所處相對位置，如下圖App.Vue文件右側(cè)所示

 　 

　　2、git plus git管理插件

 

　　3、anguage-vue 在Atom中為Vue組件文件添加語法高亮和片段。

 

 

　　三、使用vue-cli快速開始模板項目

　　vue-cli：Vue.js腳手架，用于自動生成Vue.js項目相關(guān)文件，類似Visual Studio的MVC的模板項目。

　　1、安裝vue腳手架

　　

cnpm install vue-cli -g

 

　　2、使用vue-cli初始化項目

　　在硬盤新建工程文件夾，在終端中使用cd命令進入該目錄

 

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

　　使用webpack打包項目，輸入項目名稱、描述、作者、是否使用sass后即在目錄下面生成了項目。

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　3、安裝項目依賴

　　進入項目目錄后使用npm或者cnpm(淘寶鏡像 ）安裝。

cd first-vue
npm install

 

　　4、啟動項目

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

npm run dev

 

　　5、發(fā)布項目

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

　　

npm run build

 

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

 

 

 

　　四、給項目添加組件

　　通過前面的步驟，已經(jīng)在本地跑起了一個簡單的項目，但這個項目還太簡單了，現(xiàn)在給它加點新的功能。

　　組件系統(tǒng)是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復(fù)用的小組件來構(gòu)建大型應(yīng)用，任意類型的應(yīng)用界面都可以抽象為一個組件樹，例如常用的頂部條，底部菜單都就抽象成組件使用。

 

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

<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>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

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

　　

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

 

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　4、使用。在<template></template>內(nèi)加上<firstcomponent></firstcomponent>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　完成后的代碼：

 

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

 

　　五、使用vue-router 2給項目添加路由功能

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

 

　　1、終端安裝 vue-router。

cnpm install vue-router --save

　　注意參數(shù)--save

　　--save 可以理解成生產(chǎn)環(huán)境，會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，dependencies是運行時依賴。

　　--save-dev 則是開發(fā)環(huán)境， 添加到 package.json 文件 devDependencies 鍵下，devDependencies是開發(fā)時的依賴，如生產(chǎn)時不需要用到壓縮庫應(yīng)該安裝到devDependencies 。

 

　　2、src下添加views目錄和頁面文件。在目錄下面新建兩個文件，view1.vue和view2.vue。

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　3、引入并注冊 vue-router。添加router.js文件，這里添加了兩個路由，分別指向view1和view2。

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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
    }
    ]
})

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

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

 

　　4、使用router。修改main.js，引入 router并指定當(dāng)前vue實例

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　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)站，點擊Go to view1和Go to view2，瀏覽器地址發(fā)生了改變，同時view1和view2的內(nèi)容也渲染在了router-view

 

 

　　六、使用axios請求數(shù)據(jù)

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

 

　　1、終端安裝axios

cnpm install axios --save

 

 

 

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

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

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)
})

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　3、在視圖中請求數(shù)據(jù)。修改view1.vue的js，引入axios，請求服務(wù)器數(shù)據(jù)。

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

<script type="text/javascript">import axios from 'axios'
 export default {
    name: 'view1',
    mounted: function() {
        axios.post('/jhb/getslides')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (response) {
                console.log(response);
            });
    }
}</script>

移動開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),手機維修培訓(xùn),手機軟件培訓(xùn)

 

　　由于axios不支持跨域的jsonp請求，這里筆者使用本地webapi項目的接口數(shù)據(jù)進行測試，發(fā)布后拷貝到iis目錄中，如圖可以看到成功請求到了數(shù)據(jù)。

 

　　七、更多的Vue.js

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

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

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

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

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

 

　　本文代碼已上傳至github：https://github.com/dreling8/vuejs-demo

 

　　參考：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

作者：徐領(lǐng)

出處：http://www.cnblogs.com/dreling/

本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。如果本文對您有用，請不吝點上一個贊，謝謝。

http://www.cnblogs.com/dreling/p/6892684.html