說說如何利用 Webpack 來搭建 Vue 單文件組件環境

時間  2019-11-26
標籤 說說 如何 利用 webpack 搭建 vue 文件 組件 環境 简体版
原文   原文鏈接

首先必須先安裝與配置好 Webpack。可參考如下內容：css

  1. 說說如何安裝 Webpack
  2. 說說如何配置 Webpack

.vue 單文件組件：是一個後綴名爲 .vue 的文件，咱們能夠利用 Webpack 的 vue-loader 插件來處理 *.vue 的文件。前端

1 安裝加載器

使用 npm 安裝 vue-loader、vue-style-loader、babel 以及 babel-loader 等加載器（之因此要加載最後兩個加載器，是爲了支持 ES6 語法）。vue

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader@7
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
複製代碼

對應安裝的加載器版本是：node

  • vue@2.6.8
  • vue-loader@15.7.0
  • vue-style-loader@4.1.2
  • vue-template-compiler@2.6.8
  • vue-hot-reload-api@2.3.3
  • babel@6.23.0
  • babel-loader@7.1.5
  • babel-core@6.26.3
  • babel-plugin-transform-runtime@6.23.0
  • babel-preset-es2015@6.24.1
  • babel-runtime@6.26.0

注意： 由於咱們安裝的 babel 是 6.x 版本，而它所對應的 babe-loaderl 版本必須是 7.x，因此在命令行中，咱們明確指定了版本號。若是版本不對應，就會拋出 Cannot find module '@babel/core' 錯誤。react

2 配置 webpack

在 webpack.config.js 中，新增對 .vue 文件以及 ES6 語法的解析支持：webpack

//插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//Vue Loader v15+
const VueLoaderPlugin = require('vue-loader/lib/plugin');

var config = {
    module: {
        rules: [
            {//vue 解析
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {//js 解析
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {//css 解析
                test: /\.css$/,
                use: ExtractTextPlugin.extract({//插件
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    entry: {
        main: './main'
    },
    output: {
        //目標輸出目錄
        path: '/public/assets',
        //資源文件引用目錄
        publicPath: '/dist/',
        //輸出文件的文件名
        filename: 'main.js'
    },
    plugins: [//插件
        new ExtractTextPlugin('main.css'),
        new VueLoaderPlugin()
    ]
};
module.exports = config;
複製代碼
  • 針對 .vue 文件，使用 vue-loader 來解析。注意：若是 Vue Loader 版本爲 15+，那麼必須在此配置 VueLoaderPlugin。
  • 由於 vue-loader 在編譯 .vue 文件時，會對 <template>、<script> 以及 <style> 標籤分別處理，因此咱們在 vue-loader 以後，又配置了 options 屬性，用來指定 CSS 解析器。
  • 也能夠對 <template>、<script> 以及 <style> 標籤分別指定不一樣的前端技術，好比 <style lang="less">，而後在配置文件的 loaders 中指定想要的 loader 就能夠咯O(∩_∩)O~

3 配置 babel

babel 是新一代 JavaScript 語法的編譯器 。 由於新，因此瀏覽器會因版本不一樣而存在兼容性問題。可是新語法實在太誘人咯，它不但可以減小代碼量，從而減輕代碼維護成本，並且還擁有 async,await 等新特性。web

Babel 可讓咱們放心地使用大部分 JavaScript 新的標準語法，代碼會經過編譯，生成兼容絕大多數主流瀏覽器的代碼 。 在項目工程腳手架中，通常會使用 .babelrc 文件，來配置一些基本參數，配合 webpack 進行打包壓縮 。npm

在項目根目錄，建立 .babelrc 文件，內容以下：api

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}
複製代碼
屬性 說明
presets 指定預設轉碼器；babel6 有這些值可選：es2015 ,stage-0 , stage-1 ,stage-2 , stage-3 ,react。
plugins 插件。這裏安裝了 transform-runtime 插件。
comments 在生成的文件中，是否帶註釋。

之因此使用了 transform-runtime 插件，是由於 babel 在轉換 ES2015 語法爲 ECMAScript 5 的語法時，它須要一些輔助函數，例如 _extend。babel 默認會將這些輔助函數內聯到每個 js 文件裏，這樣文當件多的時候，項目就會很大。因此 babel 提供了 transform-runtime 插件來將這些輔助函數 「搬」 到一個單獨的模塊 babel-runtime 中，經過這種方式就能有效地減小項目文件。瀏覽器

4 編寫 *.vue 文件

每一個 *.vue 文件表明一個組件，組件之間能夠相互依賴。

咱們在主工程根目錄下，新建一個 hello.vue：

<template>
    <div>您好，{{name}}</div>
</template>

<script>
    export default {
        data() {
            return {
                name: 'Deniro'
            }
        }
    }
</script>
<style scoped>
    div {
        color: #3399ff;
        font-size: 18px;
    }
</style>
複製代碼

這裏使用了 ES 6 語法：

data () {}
複製代碼

就是：

data:function () {
}
複製代碼
  • 在 <template> 標籤中寫 H5 代碼，就是暢快O(∩_∩)O~，Webpack 會把它編譯爲 Render 函數。
  • 由於配置了extract-text-webpack-plugin 插件，因此寫在 <style> 中的樣式，會被打包到 main.css 中。由於加了 scoped 屬性，因此這裏定義的樣式只對當前組件（hello.vue）有效。

5 引用 *.vue 組件

在父組件中引用 *.vue 組件時，能夠自定義組件名稱。如今讓咱們在 main.js 中引用剛剛定義的 hello.vue 組件：

// 引入 Vue 框架
import Vue from 'vue'

//引入 hello.vue 組件
import Hello from './hello.vue'

new Vue({
    el: '#app',
    render: h => h(Hello)
})

複製代碼

這裏使用了 ES6 的箭頭函數：

render: h => h(Hello)
複製代碼

至關於：

render: function (h){
  return h(Hello)
}
複製代碼

注意： 箭頭函數中的 this 對象指向的是定義時所在的對象。請看下面的例子：

function Timer() {
    this.id = 10;

    var that = this;

    setTimeout(function () {
        console.log('普通 this=' + this.id);//undefined
        console.log('普通 that=' + that.id);//10

    }, 1000)

    setTimeout(() => {
        console.log('箭頭函數=' + this.id);//10
    }, 1000)
}

new Timer();
複製代碼

運行結果：

使用箭頭函數以後，咱們就不須要再額外定義一個 that 來保存父函數的 this 對象咯，代碼將所以變得更簡潔O(∩_∩)O~

6 運行

在安裝了 Webpack 環境下的工程根目錄，執行 npm run dev，執行成功後，就會自動打開瀏覽器：

F12 打開瀏覽器調試器：

能夠看到，<div id="app"> 被替換爲

<div data-v-3548c998="">您好，Deniro</div>
複製代碼

對應的 CSS 也加上了咱們定義的樣式。

之因此加了 -v-xxx，是由於咱們在 <style> 加了 scoped 屬性。

7 擴展

咱們再定義兩個組件（標題與按鈕組件），把它們引入 hello.vue。

title.vue：

<template>
    <h1>
        <a :href="'#'+title">{{title}}</a>
    </h1>
</template>

<script>
    export default {
        props: {
            title: {
                type: String
            }
        }
    }
</script>

<style scoped>
    h1 a {
        color: #3399ff;
        font-size: 16px;
    }
</style>
複製代碼

button.vue：

<template>
    <button @click="handleClick" :style="styles">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props: {
            color: {
                type: String,
                default: '#00cc66'
            }
        },
        computed: {
            styles() {
                return {
                    background: this.color
                }
            }
        },
        methods: {
            handleClick(e) {
                this.$emit('click', e);
            }
        }
    }
</script>

<style scoped>
    button {
        border: 0;
        outline: none;
        color: #fff;
        padding: 4px 8px;
    }

    button:active {
        position: relative;
        top: 1px;
        left: 1px;
    }
</style>
複製代碼

在根實例 hello.vue 組件中，引入剛剛定義的兩個組件：

<template>
    <div>
        <v-title title="電子煙大限將至？"></v-title>
        <v-button @click="handleClick">請點擊</v-button>
    </div>
</template>

<script>
    //導入組件
    import vTitle from './title.vue';
    import vButton from './button.vue';

    export default {
        data() {
          ...
        },
        components: {
            vTitle,
            vButton
        },
        methods: {
            handleClick(e) {
                console.log(e);
            }
        }
    }
</script>
<style scoped>
  ...
</style>
複製代碼

這裏也用了 ES6 對象字面量縮寫語法：

components: {
            vTitle,
            vButton
        }
複製代碼

至關於：

components: {
            vTitle: vTitle,
            vButton: vButton
        }
複製代碼

當對象的 key 與 value 同名時，就能夠採用這種簡潔的寫法咯O(∩_∩)O~

注意： 這些導入的組件，都是局部註冊且能夠自定義名稱的組件。

渲染結果：

點擊按鈕組件後的運行結果：

至此，Vue 單文件組件環境搭建成功O(∩_∩)O~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程