Vue 入門. 如何在HTML代碼裏面快速使用Vue

概述

browserify是一個 CommonJS風格的模塊管理和打包工具，上一篇咱們簡單地介紹了Vue.js官方基於browserify構築的一套開發模板。webpack提供了和browserify相似的功能，在前端資源管理這方面，它提供了更加出色的功能。
官方基於webpack提供了兩種項目模板，分別是vue-webpack-simple模板和vue-webpack模板，今天咱們將介紹官方提供的這兩種項目模板，並用vue-webpack-simple模板建立一個簡單的示例。

本文的Demo和源代碼已放到GitHub，若是您以爲內容不錯，請點個贊，或在GitHub上加個星星！

點擊：vue-webpack-simple示例 GitHub Source

Webpack簡介

Webpack是當下最熱門的前端資源模塊化管理和打包工具，它能夠將不少鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還能夠將按需加載的模塊進行代碼分割，等到實際須要的時候再異步加載。經過loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

下圖是官方對Webpack的簡介，經過這幅圖也不難看出，一些相互依賴的模塊文件，會被打包成一個或多個js文件，能夠減小HTTP的請求次數。

 

 

Webpack支持的特性：

1. 支持CommonJs和AMD模塊，意思也就是咱們基本能夠無痛遷移舊項目。
2. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持。
3. 能夠經過配置或智能分析打包成多個文件，實現公共模塊或按需加載。
4. 將樣式文件和圖片等靜態資源也可視爲模塊進行打包。配合loader加載器，能夠支持sass，less等CSS預處理器。
5. 內置有source map，即便打包在一塊兒依舊方便調試。

因爲本文不是webpack的教程，因此webpack相關的一些知識還須要各位去了解。

webpack主頁：http://webpack.github.io/

環境準備

Node.js和Git是必備的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依賴管理。

 

在使用這兩種項目模板前，須要先安裝vue cli，執行如下命令安裝vue cli

npm install -g vue-cli

　　

安裝完vue cli後，咱們就能夠基於vue-webpack-simple模板和vue-webpack模板建立項目。

使用vue-webpack-simple模板

1.生成項目

在某個目錄下右鍵運行Git Bash Here，好比個人目錄是D:\VueOfficialTemplates。

 

在git bash下輸入如下命令：

vue init webpack-simple my-webpack-simple-demo

　　

webpack-simple是項目模板的名稱，my-webpack-simple-demo是你要生成的項目名稱。

 

目錄下生成了一個文件夾my-webpack-simple-demo。

 

2. 項目結構說明

打開my-webpack-simple-demo文件夾，看到如下目錄結構：

 

文件樹結構以下：

├─.babelrc // babel配置文件

├─.gitignore     

├─index.html // 主頁

├─package.json // 項目配置文件

├─README.md 

├─webpack.config.js // webpack配置文件

├─dist // 發佈目錄

├─.gitkeep      

├─src // 開發目錄  

├─App.vue // App.vue組件

├─main.js // 預編譯入口

　

 

相比於browserify-simple模板，多了一個webpack.config.js文件。

package.json

{ "name": "my-webpack-simple-demo", "description": "A Vue.js project", "author": "keepfool ", "private": true, "scripts": { "dev": "webpack-dev-server --inline --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^1.0.0", "babel-runtime": "^6.0.0" }, "devDependencies": { "babel-core": "^6.0.0", "babel-loader": "^6.0.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2": "^6.0.0", "cross-env": "^1.0.6", "css-loader": "^0.23.0", "file-loader": "^0.8.4", "json-loader": "^0.5.4", "url-loader": "^0.5.7", "vue-hot-reload-api": "^1.2.0", "vue-html-loader": "^1.0.0", "vue-loader": "^8.2.1", "vue-style-loader": "^1.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0" }

}

 

開發時依賴babel、各類loader和webpack，發佈時依賴vue和babel-runtime。
scripts節點一樣定義了開發時和發佈時的編譯命令，和browserify不一樣的是，編譯的輸入和輸出是定義在webpack.config.js文件中的。

webpack.config.js

var path = require('path') var webpack = require('webpack')

module.exports = {

  entry: './src/main.js',

  output: {

    path: path.resolve(__dirname, './dist'),

    publicPath: '/dist/',

    filename: 'build.js' },

  resolveLoader: {

    root: path.join(__dirname, 'node_modules'),

  },

  module: {

    loaders: [

      {

        test: /\.vue$/,

        loader: 'vue' },

      {

        test: /\.js$/,

        loader: 'babel',

        exclude: /node_modules/ },

      {

        test: /\.json$/,

        loader: 'json' },

      {

        test: /\.html$/,

        loader: 'vue-html' },

      {

        test: /\.(png|jpg|gif|svg)$/,

        loader: 'url',

        query: {

          limit: 10000,

          name: '[name].[ext]?[hash]' }

      }

    ]

  },

  devServer: {

    historyApiFallback: true,

    noInfo: true },

    devtool: '#eval-source-map' }
 if (process.env.NODE_ENV === 'production') {

      module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': {

        NODE_ENV: '"production"' }

    }), new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false }

    }), new webpack.optimize.OccurenceOrderPlugin()

  ])

}

 

webpack.config.js內容仍是比較好理解的，它採用了CommonJS的寫法，entry節點配置了編譯入口，output節點配置了輸出。
這段entry和output配置的含義是：編譯src/main.js文件，而後輸出到dist/build.js文件。

3. 安裝項目依賴

執行如下命令安裝項目依賴：

cd my-webpack-simple-demo

npm install

　　

安裝完成後，目錄下會產生一個node_modules文件夾。

 

項目相關的依賴都存放在這個文件夾下了，比vue-browserify-simple項目模板的依賴要多得多。

 

4. 運行示例

執行如下命令運行示例：

npm run dev

　　

打開127.0.0.1:8080，能夠看到如下畫面：

 

注意：和browserify不一樣的是，執行npm run dev命令後並不會在dist目錄下生成build.js文件，開發環境下build.js是在運行內存中的。

 

 

5. 發佈

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

npm run build

 

 

使用vue-webpack模板

1.生成項目

從新打開一個git bash窗口，執行如下命令：

vue init webpack my-webpack-demo

　　

webpack是項目模板，my-webpack-demo是項目名稱。

 

目錄下生成了一個文件夾my-webpack-demo：

 

 

文件目錄結構以下（參考：https://vuejs-templates.github.io/webpack/structure.html）

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

 

2. 安裝依賴

執行如下兩行命令，安裝項目依賴：

cd my-webpack-demo

npm install

　　 

（安裝過程較爲緩慢，須要耐心等待…）

3. 運行示例

執行如下命令運行示例：

npm run dev

　　

打開127.0.0.1:8080，能夠看到如下畫面：

 

4. 發佈

執行如下命令生成發佈：

npm run build

　　

 

和vue-simple-webpack模板不一樣的是，全部的靜態資源，包括index.html都生成到dist目錄下了。

 

這意味着你能夠直接拿着dist目錄去發佈應用，例如在IIS下將dist目錄發佈爲一個網站。

vue-simple-webpack示例

昨天咱們使用了vue-simple-browserify模板作了一個小示例，今天咱們就用vue-simple-webpack模板完成一樣的示例。

該示例的代碼我就不貼出來了，你們能夠到本文開頭的GitHub地址去下載。