Vue + Webpack 實踐

Vue全家桶

參考

• vue-tutorial

• Vue+Webpack開發可複用的單頁面富應用教程

• Vue+Webpack使用規範
  對比其餘框架

推薦代碼使用 CommonJS 或 ES6 模塊，而後使用 Webpack 或 Browserify 打包。

你可使用 Webpack + vue-loader 或 Browserify + vueify 構建這些單文件 Vue 組件。

能夠在 Webpackbin.com 上在線嘗試！
chrome開發工具 : vue-developertools

安裝

1. 咱們將會使用webpack去爲咱們的模塊打包，預處理，熱加載。若是你對webpack不熟悉，它就是能夠幫助咱們把多個js文件打包爲1個入口文件，而且能夠達到按需加載。這就意味着，咱們不用去擔憂因爲太多的組件，致使了過多的HTTP請求，這是很是有益於產品體驗的。但，咱們並不僅是爲了這個而使用webpack，咱們須要用webpack去編譯.vue文件，若是沒有使用一個loader去轉換咱們.vue文件裏的style，js，html，那麼瀏覽器就沒法識別。

2. 模塊熱加載是webpack的一個很是碉堡的特性，將會爲咱們的單頁應用帶來極大的便利。

   一般來講，當咱們修改了代碼刷新頁面，那應用裏的全部狀態就都沒有了。這對於開發一個單頁應用來講是很是痛苦的，由於須要從新在跑一遍流程。若是有模塊熱加載，當你修改了代碼，你的代碼會直接修改，頁面並不會刷新，因此狀態也會被保留。

3. Vue也爲咱們提供了CSS預處理，因此咱們能夠選擇在.vue文件裏寫LESS或者SASS去代替原生CSS。

4. 咱們過去一般須要使用npm下載一堆的依賴，可是如今咱們能夠選擇Vue-cli。這是一個vue生態系統中一個偉大創舉。這意味着咱們不須要手動構建咱們的項目，而它就能夠很快地爲咱們生成。

使用腳手架工具 vue-cli 能夠快速地構建項目：單文件 Vue 組件，熱加載，保存時檢查代碼，單元測試等。

• 安裝vue-cli (確保你有node和npm)

  $ npm install -g vue-cli

• 使用腳手架初始建立項目

  $ vue init <template-name> <project-name>

  Example:*建立一個webpack項目*

  $ vue init webpack my-project

• 項目模版下載好了以後須要安裝項目用到的依賴包

  $ cd my-project
  $ npm install

• 這時能夠將項目運行起來看看效果了

  $ npm run dev

  這一行命令表明着它會去找到package.json的scripts對象，執行node bulid/dev-server.js。在這文件裏，配置了Webpack，會讓它去編譯項目文件，而且運行服務器，咱們在localhost:8080便可查看咱們的應用。

vue-cli 構建的目錄結構

.
├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

更多內容參照https://vuejs-templates.github.io/webpack

Vue 指令

經常使用指令:

• v-if

• v-show

• v-else

• v-for

• v-bind

• v-on

• v-model
  更多指令請移步Vue 指令

初始化（main.js)

對於單頁應用，推薦使用官方庫 vue-router。詳細請查看它的文檔。

添加route配置

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import Hello from './components/Hello.vue'
import Page from './components/Page.vue'

//註冊兩個插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  '/hello': {
    component: Hello
  },
  '/page': {
    component: Page
  }
})

router.redirect({
  '*': '/hello'
})

router.start(App, '#app')//設置啓動頁面

index.html

<div id="app">
    <app></app>
</div>

應用route

<template>
    <!-- 使用指令 v-link 進行導航。 -->
    <ul class="nav navbar-nav">
        <li><a v-link="{path: '/home'}">首頁</a></li>
        <li><a v-link="{path: '/page'}">首頁</a></li>
    </ul>
    <!-- 路由外鏈 -->
    <router-view></router-view>
</template>

建立＆應用組件

若是你喜歡預處理器，甚至能夠這麼作：

定義View:

<template>
    <vue-component></vue-component>
</template>

定義Model和ViewModel:

var vueComponent = require('../components/vue-component');
    module.exports = {
        components: {
            vueComponent
        }
    }

數據請求:vue-resource

//在main.js中註冊vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

// 基於全局Vue對象使用http
Vue.http.get('//webapi.busi.inke.com/web/live_hotlist_pc', {}).then((response) => {
    console.log('[Leo]Vue-resource:success=>', response);
}, (response) => {
    console.log('[Leo]Vue-resource:error=>', response);
});
// 在一個Vue實例內使用$http
this.$http.get('//webapi.busi.inke.com/web/live_hotlist_pc', {}).then((response) => {
    console.log('[Leo]Vue-resource:success=>', response);
}, (response) => {
    console.log('[Leo]Vue-resource:error=>', response);
});