Vue入門：Vue.js 2.x 實例搭建

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

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ì)”的代碼編輯器——sublime扫尺，它提供了代碼智能提示筋栋，智能補全等功能≌ぃ總之就是更加智能和便捷弊攘，大大提升了開發(fā)效率抢腐。個人覺得Webstorm相對更加智能一點，但感覺并不簡潔襟交，我的電腦運行Webstorm就有卡頓現(xiàn)象迈倍，但是Sublime相對輕巧靈活，界面清爽捣域，功能也一應(yīng)俱全啼染。具體的功能比較多，你可以自己親自使用試試焕梅，下載地址是：http://www.sublimetext.com/

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

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

1斜棚、安裝 vue 腳手架

cnpm install vue-cli -g

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

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

Project name :項目名稱该窗，如果不需要更改直接回車就可以了弟蚀。注意：這里不能使用大寫，所以我把名稱改成了vueclitest
Project description:項目描述酗失，默認為A Vue.js project,直接回車义钉，不用編寫。
Author：作者规肴，如果你有配置git的作者捶闸，他會讀取。
Install vue-router? 是否安裝vue的路由插件奏纪，我們這里需要安裝鉴嗤，所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風(fēng)格。我們這里不需要輸入n（建議）序调，如果你是大型團隊開發(fā)醉锅，最好是進行配置。
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha发绢，我們這里不需要硬耍，所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試边酒，我們這里不需要经柴，所以輸入n。

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

├─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配置文件</pre>

3坯认、安裝項目依賴

進入項目目錄后使用npm或者cnpm(淘寶鏡像)、yarn

cd first-vue
npm install 或 cnpm install

4、啟動項目

由于vue.js不支持ie8牛哺，建議默認瀏覽器使用chrome陋气，自動啟動瀏覽器就會看到這個界面了。

安裝成功

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ù)的 / 目錄下±禄伲拷貝index.html到dist文件文件夾并放在本地IIS目錄下番川，這樣就能訪問了到涂。（關(guān)于webpack的詳細使用脊框，建議學(xué)習(xí)專門的教程，打包的配置文件在webpack.conifg.js里面践啄，這里暫時只要知道這樣用就行了）

四浇雹、給項目添加組件

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

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贩据、注冊。

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

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/ 頁面(之前打開過就會自動刷新)剔宪，這樣就成功在項目中添加了一個組件壹无。

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

實際項目中地淀，由于不同模塊的劃分岖是，需要路由功能，使用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句葵。

<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、引入并注冊 vue-router.

添加router.js文件乍丈，這里添加了兩個路由，分別指向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實例。

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)站碎浇，點擊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绒极。

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集峦、在視圖中請求數(shù)據(jù)抠刺。

修改view1.vue的js摘昌，引入axios，請求服務(wù)器數(shù)據(jù)罕容。

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

axios不支持跨域的jsonp請求

七稿饰、引入第三方UI庫。

本文引用的是Element旅择，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术瓮。

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 的引入。需要注意的是尝蠕，樣式文件需要單獨引入载庭。

3廊佩、修改webpack.config.js靖榕。

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

錯誤提示說element-icons引用出錯茁计，找不到合適的loader，這是因為file-loader默認處理文件格式是不包含'.tff'和'.woff'的; 于是在webpack.config.js中將目錄中的文件格式加上：

然后重新運行践剂，這樣就能正確加載了娜膘；

八、更多的Vue军洼。

至此贾富，我們已經(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 圖片延遲加載插件。

更多實用的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

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