11. webpack配置Vue

盛開的太陽 發表於 2021-03-04

一. 在webpack中配置vue

瞭解了webpack的原理和用法以後, 我們來引入Vue

webpack原理和用法詳解連結: cnblogs.com/ITPower/p/14467745.html

第一步: 需要在webpack中引入vue.js

如何引入呢?

npm install vue --save

我們之前下載模組的時候, 都是使用--save-dev. 表示開發模式.
現在我們使用的是--save, 表示的是執行模式. 因為我們最終需要線上上使用vue, 所以 這裡下載的時候指定為執行時模式

這樣就在webpack中安裝了vue, 在node_modules中就會增加一個資料夾vue

11. webpack配置Vue

第二步: 使用import引入vue

import Vue from 'vue'

第三步: 構建vue物件並呼叫

const app = new Vue({
    el: "#app",
    data: {
        message: "hello world!"
    }
})

然後在頁面呼叫message

<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script src="./dist/bundle.js" ></script>
</body>

第四步: 執行看效果

發現報異常.

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.


這裡提示說: 現在使用的runtime-only 構建template是無效的.

這句話是什麼意思呢?

vue在釋出的時候, 構建了兩個版本

  • 一個是: runtime-only: 使用這個版本, 程式碼裡面不可以有template模板, 因為沒有對應的編譯器
    另一個是: runtime-compiler: 程式碼中可以有template模板, 因為有對應的編譯器來編譯tempalte模板


解決這個問題, 我們需要修改webpack.config.js配置,增加

resolve:{
    alias: {
       // 這段代表表示: 給vue指定了一個別名. 如果在程式碼中使用到了vue, 那麼會去找node_module/vue/dist/vue.esm.js檔案進行編譯
        'vue$': 'vue/dist/vue.esm.js'
    }
}

這段代表表示: 給vue指定了一個別名. 如果在程式碼中使用到了vue, 那麼會去找node_module/vue/dist/vue.esm.js檔案進行編譯

11. webpack配置Vue

當我們使用vue/dist/vue.esm.js檔案的時候, 就表示使用的是runtime-compiler的方式進行編譯, 這樣就可以有tempalte了

然後再來看效果:

11. webpack配置Vue

 二. vue模板的寫法

1. el和template的關係

我們之前寫程式碼的時候都是怎麼寫的呢? 來看看

首先有一個main.js檔案

import Vue from 'vue'const app = new Vue({
    el: "#app",
    data: {
        message: "hello world!",
        week:"今天是3月第一週"
    }
})

這裡指定了el, 表示當前vue作用於id=app的dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

然後我們就可以在頁面上獲取data的的變數了

 

但通常實際中, 我們不會這麼寫, 因為這樣不方便擴充套件. 我們只會在index.html中寫一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
    </div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

然後將頁面要渲染的內容寫到main.js中

const app = new Vue({
    el: "#app",
    template: `
        <div>
            <h2>{{message}}</h2>
            <h2>{{name}}</h2>
        </div>
    `,
    data: {
        message: "hello world!",
        week:"今天是3月第一週"
    }
})

如上, 使用template標籤來接收模板的內容. 這樣, 我們重新npm run build, 這時可以看到, template中的內容覆蓋了el元素的內容

來看看頁面渲染的效果

11. webpack配置Vue

 

我們發現, 之前id="app"的div元素沒有了, 而是被template中的內容替換了.

 

總結: 

el和template的關係是: template中的內容會替換el中的內容

 

2. 優化

 

當然了, 如果頁面有很多東西, 把template放在new Vue()物件裡就有些不合適了. 我們可以像之前一樣, 把他提取出來

import Vue from 'vue'

let comp1 = `
        <div>
            <h2>{{message}}</h2>
            <h2>{{week}}</h2>
        </div>
    `

const app = new Vue({
    el: "#app",
    template: comp1,
    data: {
        message: "hello world!",
        week:"今天是3月第一週"
    }
})

把template單獨提取出來, 如上寫法. 這樣在app中就沒有大段的程式碼塊了. 看這清晰了很多.

2.再優化

繼續來優化, 模板中的變數, 是不是也可以提取到模板裡面呢? 這樣, 讓vue物件直接引用這個模板就可以了

let comp1 = Vue.component("comp1", {
    template: `
        <div>
            <h2>{{message}}</h2>
            <h2>{{week}}</h2>
        </div>
    `,
    data() {
        return {
            message: "hello world!",
            week:"今天是3月第一週"
        }
    }
})

const app = new Vue({
    el: "#app",
    template: '<comp1/>',
    components: {
        comp1
    }
})

這裡就是將html和data整合成一個元件了,然後我們在vue中直接引入元件就可以了.

template: '<comp1/>',

這句話的含義是, 用comp1元件的內容替換id="app"的div的內容

4. 終極寫法

繼續將上面的內容進行優化. 我們將模板, 資料進行分離. 建立vue模板.

第一步: 建立一個vue component檔案. 命名為app.vue

11. webpack配置Vue

<template>
    
</template>

<script>
    export default {
       
    }
</script>

<style scoped></style>

我們看到vue模板包含三個部分, template, script和style

  • template: 用來放模板部分的內容
  • script: 用來存放指令碼資料
  • style: 用來存放樣式

 這就是一個模板了. 

<template>
    <div class="background">
        <h2>{{message}}</h2>
        <h2>{{week}}</h2>
    </div>
</template>

<script>
    export default {
        name: "app",
        data() {
            return {
                message: "hello world!",
                week: "今天是3月第一週"
            }
        }
    }
</script>

<style scoped>
    .background {
        background-color: #085e7d;
    }
</style>

模板寫好了, 接下來我們匯入模板

第二步:匯入模板

import app from "./vue/app.vue"

const comp1 = new Vue({
    el: "#app",
    template: '<comp1/>',
    components: {
        comp1
    }
})

第三步: 構建

npm run build

構建的時候報錯了

 11. webpack配置Vue

 因為我們引入了vue格式的檔案, 所以需要安裝vue型別的loader

第四步: 安裝vue型別的loader

 安裝vue-loader和vue-template-compiler

npm install --save-dev vue-loader vue-template-compiler

第五步: 配置webpack.config.js

module: {
        rules: [
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },

 

然後在執行npm run build

依然報錯

11. webpack配置Vue

 

這是因為vue-loader的版本過高引起的. vue13以後的版本都會要求安裝一個plugin.

我們可以修改vue-loader的版本, 將其降低一點 

 

"devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^2.0.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^2.3.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0"
  },

然後重新安裝一下

npm install

安裝完成以後, 再去執行npm run build, 就成功了

11. webpack配置Vue

 

 5. 在元件中引入其他元件

現在的目標, 我們在定義一個新的元件comp2, 然後在app.vue中引入comp2元件. 看看如何實現

第一步: 定義一個comp2.vue

<template>
    <div class="bg">
        <h2>我是第二個元件</h2>
    </div>
</template>

<script>
    export default {
        name: "Comp2",
        data() {
            return {
                message: "大家好, 歡迎來到第二元件區"
            }
        }
    }
</script>

<style scoped>
.bg {
    background: deeppink;
}
</style>

 

第二步: 在app.vue中引入comp2.vue

import comp2 from './Comp2.vue'

 

第三步: 將元件註冊到new Vue()例項中

export default {
        name: "app",
        data() {
            return {
                message: "hello world!",
                week: "今天是3月第一週"
            }
        },
        components: {
            comp2
        }
    }

 

第四步: 呼叫comp2元件

<template>
    <div class="background">
        <h2>{{message}}</h2>
        <h2>{{week}}</h2>
        <div>
            <comp2></comp2>
        </div>
    </div>
</template>

第五步: 重新編譯

npm run build

第六步: 檢視效果

11. webpack配置Vue