前端架構之路：使用Vue.js開始第一個項目

　　Vue.js作爲目前前端最熱門的庫之一，爲快速構建並開發前端項目多了一種思惟模式。本文經過一個簡單的實例開始上手Vue.js開發。

　1、技術準備

　　使用傳統mvc項目的開發人員，筆者建議在開始項目前，對如下兩個技術點進行了解。

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

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

　2、開發工具

　　工欲善其事必先利其器，開發Vue項目建議使用「屬於21世紀」的代碼編輯器——Atom，它開源免費並且是跨平臺的，基於 WEB 技術（Chromium+Node.js）開發的，簡單理解的話編輯器自己實際上是一個跑在本地的網頁，用戶能夠用Javascript來編寫編輯器插件，缺點就是基於WEB致使性能不是很理想，但這不影響筆者對它的愛，Atom好用，並且有大量的高亮提示，語法插件可以使用 ，固然你也能夠經過安裝插件使用宇宙第一IDE-VisualStudio進行開發。使用Atom建議安裝如下插件。

　　一、minimap 讓你瞭解當前屏幕所處相對位置，以下圖App.Vue文件右側所示

 　 

　　二、git plus git管理插件

 

　　三、anguage-vue 在Atom中爲Vue組件文件添加語法高亮和片斷。

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

　　vue-cli：Vue.js腳手架，用於自動生成Vue.js項目相關文件，相似Visual Studio的MVC的模板項目。

　　一、安裝vue腳手架

　　

cnpm install vue-cli -g

 

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

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

 

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

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

　　文件樹結構以下：

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

 

　　三、安裝項目依賴

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

cd first-vue npm install

 

　　四、啓動項目

　　因爲vue.js不支持ie8，建議默認瀏覽器使用chrome，自動啓動瀏覽器就會看到這個界面了。

npm run dev

 

　　五、發佈項目

　　執行如下命令會生成發佈時的build.js，而且是通過壓縮的。

　　

npm run build

 

　　這時候會在目錄下生成dist文件夾和相關發佈後的文件，因爲使用的是webpack-simple方式打包，不會生成index.html文件，特別要注意的是index.html 加上 dist 不能採用 file 協議打開，必須使用 http 協議打開，而且須要放在 http 服務的 / 目錄下。拷貝index.html到dist文件文件夾並放在本地IIS目錄下，這樣就能訪問了。（關於webpack的詳細使用，建議學習專門的教程，打包的配置文件在webpack.conifg.js裏面，這裏暫時只要知道這樣用就好了）

 

 

　4、給項目添加組件

　　經過前面的步驟，已經在本地跑起了一個簡單的項目，但這個項目還太簡單了，如今給它加點新的功能。

　　組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓咱們可使用獨立可複用的小組件來構建大型應用，任意類型的應用界面均可以抽象爲一個組件樹，例如經常使用的頂部條，底部菜單都就抽象成組件使用。

 

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

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

 

　　二、引入。 打開App.vue，引入firstcomponent組件，並刪除vue-cli腳手架生成的一些無心義html。在<script></script>標籤內的第一行寫

　　

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

 

　　三、註冊。在<script></script>標籤內的 data 代碼塊後面加上 components: { firstcomponent }。記得中間加英文逗號

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

 

　　四、使用。在<template></template>內加上<firstcomponent></firstcomponent>

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

 

　　完成後的代碼：

 

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

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

　　實際項目中，因爲不一樣模塊的劃分，須要路由功能，使用vue-router爲項目添加路由。注意: vue-router@2.x 只適用於 Vue 2.x 版本。

 

　　一、終端安裝 vue-router。

cnpm install vue-router --save

　　注意參數--save

　　--save 能夠理解成生產環境，會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，dependencies是運行時依賴。

　　--save-dev 則是開發環境， 添加到 package.json 文件 devDependencies 鍵下，devDependencies是開發時的依賴，如生產時不須要用到壓縮庫應該安裝到devDependencies 。

 

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

 

　　三、引入並註冊 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 } ] }) 

 

　　至此，目錄結構如此

 

　　四、使用router。修改main.js，引入 router並指定當前vue實例

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

 

　　五、添加路由連接和出口。修改App.vue，添加連接和出口。

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

 

　　查看網站，點擊Go to view1和Go to view2，瀏覽器地址發生了改變，同時view1和view2的內容也渲染在了router-view

 

　6、使用axios請求數據

　　至此，咱們的項目實現了路由功能，但這些頁面的數據都是靜態的，下面咱們使用axios庫來請求動態數據並展現出來。vue更新到2.0以後,做者就宣告再也不對vue-resource更新,而是推薦的axios。

 

　　一、終端安裝axios

cnpm install axios --save

 

 

 

　　二、引入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) })

 

　　三、在視圖中請求數據。修改view1.vue的js，引入axios，請求服務器數據。

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

 

　　因爲axios不支持跨域的jsonp請求，這裏筆者使用本地webapi項目的接口數據進行測試，發佈後拷貝到iis目錄中，如圖能夠看到成功請求到了數據。

　7、更多的Vue.js

　　至此，咱們已經搭建了Vue.js開發環境並使用發佈了一個功能簡單但羅完整項目，一些不太複雜的項目基本能夠按步驟來實現。推薦一些優秀的vue.js庫來構建更復雜的工程。

　　Vuex：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

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

　　Element：一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫，提供了配套設計資源，幫助你的網站快速成型。官網： 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