利用webpack和vue實現組件化

時間 2019-11-07

標籤利用 webpack vue 實現組件简体版

原文原文鏈接

原文連接：http://mrzhang123.github.io/2016/06/02/webpack-vue-3/php

本文基於`vue1.x`

基於`vue2.x&webpack2.x`請移步至

Vue2.x踩坑與總結
 Webpack2.x踩坑與總結css

上一篇webpack+vue起步咱們實現了用webpack打包vue的最基本用法，這篇咱們將利用webpack+vue實現組件化html

在vue中實現組件化用到了vue特有的文件格式.vue，在每個.vue文件就是一個組件，在組件中咱們將html，css，js所有寫入，而後在webpack中配置vue-loader就能夠了。前端

創建vue組件

在src目錄下創建components文件夾，並在其中創建app.vue文件，這樣咱們項目的目錄結構以下：vue

|--dist             //webpack打包後生成的文件夾
|   |--build.js
|--node_modules     //項目的依賴所在的文件夾
|--src              //文件入口
|   |--components   //組件存放文件夾
|       |--app.vue  //組件
|   |--main.js      //主js文件
|--index.html       //主html文件
|--package.json
|--webpack.config.js //webpack配置文件

首先在index.hmtl中寫入代碼：node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue example</title>
</head>
<body>
    <app></app>
    <script src="dist/build.js"></script>
</body>
</html>

在編輯器中打開app.vue文件，寫入以下代碼：webpack

<template>
<div class="message">{{msg}}</div>    
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello from vue-loader'
    }
  }
}
</script>
<style>
.message{
    color:red;
    font-size:36px;
    font-weight:blod;
}
</style>

在main.js中寫入：git

import Vue from 'vue'
import App from './components/app.vue'

new Vue({
  el: 'body',
  components:{App}
});

這樣運行命令webpack就能夠看到效果了
這裏用到了ES6的模塊兒---import，exportgithub

`export`命令

export命令用於規定模塊的對外接口。一個模塊就是一個獨立文件。該文件內的全部變量外部都沒法獲取。若是但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字對外暴露出該變量。例如：web

//export.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

這樣就能夠對外輸出三個變量。

`import`命令

使用export對外暴露了接口後，其餘js文件經過import命令加載這個模塊文件。上面暴露的三個變量在另外一個js文件中引入以下：

//import.js
import {firstName,lastName,year} from './export';
function setName(element){
    element.textContent = firstName + ' ' + lastName;
}

webpack的hot-reload

前端自動刷新如今已經很常見了，即改變頁面後，瀏覽器自動刷新，可是這個功能在咱們作單頁面應用時候會很很差用，因此，webpack支持hot-reload(熱替換)，當咱們修改模塊時候不會頁面不會刷新，會直接在頁面中生效。

hot-reload的基礎---webpack-dev-server

webpack-dev-server支持兩種模式的自動刷新頁面：

iframe模式（頁面嵌入一個iframe並在其中呈現頁面的變化）
inline模式（一個小型的webpack-dev-server客戶端會做爲入口文件打包，這個客戶端會在後端代碼改變的時候刷新頁面）

iframe模式

使用iframe模式無需額外的配置，在終端輸入命令

$ webpack-dev-server

在瀏覽器中輸入 http://loacalhost:8080/webpack-dev-server/index.html

inline模式

在dos下輸入命令

$ webpack-dev-server --inline --hot

啓動服務器，在瀏覽器中打開 http://loacalhost:8080 就能夠看到咱們的頁面，此時修改app.vue中的css，以及html中的文字，均可以看到在瀏覽器中立馬呈現。
關於webpack-dev-server的詳細說明，能夠參考官方文檔或者博客WEBPACK DEV SERVER。

這裏有一個問題須要說明下

在不少文章中都說，修改app.vue文件中script標籤中的msg文字，會在瀏覽器中當即呈現效果，可是事實上我在作demo的時候並無出現這個效果，Google了不少，找到了答案，尤大說：「data是初始值，但熱更新的時候會保留當前狀態」，原問題及答案連接。

至此，關於webpack+vue的基本結束，雖然簡單，可是因爲在這個過程當中也遇到一些坑，因此總結下，關於對vue的研究，這才只是個開始...

附：

個人webpack配置文件：

var path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    publicPath:'dist/',
    filename: 'build.js'
  },
  //配置自動刷新,若是打開會使瀏覽器刷新而不是熱替換
  /*devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    grogress: true
  },*/
  module: {
    loaders: [
      //轉化ES6語法
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      //解析.vue文件
      {
        test:/\.vue$/,
        loader:'vue'
      },
      //圖片轉化，小於8K自動轉化爲base64的編碼
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      }
    ]
  },
  vue:{
    loaders:{
      js:'babel'
    }
  },
  resolve: {
        // require時省略的擴展名，如：require('app') 不須要app.js
        extensions: ['', '.js', '.vue'],
        // 別名，能夠直接使用別名來表明設定的路徑以及其餘
        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    }    
}

package.json文件：

{
  "name": "webpackvue",
  "version": "1.0.0",
  "description": "",
  "main": "vue.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue":"^1.0.24",
    "vue-router":"^0.7.13",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.2",
    "vue-loader": "^8.5.2",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.13.0"
  }
}