一. 在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
第二步: 使用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檔案進行編譯
當我們使用vue/dist/vue.esm.js檔案的時候, 就表示使用的是runtime-compiler的方式進行編譯, 這樣就可以有tempalte了
然後再來看效果:
二. 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元素的內容
來看看頁面渲染的效果
我們發現, 之前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
<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
構建的時候報錯了
因為我們引入了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
依然報錯
這是因為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, 就成功了
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
第六步: 檢視效果
