1. 在webpack中使用vue
1.1 webpack中使用vue说明
- 在index.html中定义挂在点
- 在入口js文件中引入vue,并实例化
- 注意在webpack中配置别名,默认使用的是
runtime-only, - 因为涉及到模板编译需要使用到
runtime-compiler
1.2 index.html模板中
<div id="app">
{{ msg }}
</div>
1.3 主入口main.js文件
// 引入vue
import Vue from 'vue'
// 实例化vue
let vm = new Vue({
el:"#app",
data:{
msg:"Hello World"
}
})
1.4 webpack.config.js中配置别名
resolve: {
// alias :配置别名
alias: {
"vue":"vue/dist/vue.esm.js"
}
}
问题:
- 在入口js中开发代码,还需要随时去html文件中改模板就不太适合,
- 此时可以通过template 选项在vue实例中处理模板的标签
1.5 将模板代码提取到js中
import Vue from 'vue'
let vm = new Vue({
el:"#app",
template:`
<div> {{ msg }} </div>
`,
data:{
msg:"Hello World"
}
})
2. 将模板抽离为组件
2.1 抽离组件说明
在vue实例化选项template中开发大量的代码不是特别好,
因此我们可以将template中的代码抽离为组件,用组件替代模板
2.2 抽离为组件
import Vue from 'vue'
// 抽离为组件
let App = {
template:`
<div> {{ msg }} </div>
`,
data(){
return {
msg:"Hello World"
}
}
}
let vm = new Vue({
el:"#app",
template: "<App/>",
components: {
App
}
})
以后组件中可能会开发大量的代码,
因此我们可以将组件抽离为单独的js文件
2.3 组件抽离为单独的js文件
组件App.js文件
export default {
template:`
<div> {{ msg }} </div>
`,
data(){
return {
msg:"Hello World"
}
}
}
主入口main.js文件
import Vue from 'vue'
// 导入组件的js文件
import App from './App.js'
let vm = new Vue({
el:"#app",
template: "<App/>",
components: {
App
}
})
2.4 .vue单文件组件
说明
- 组件的模板和js代码的耦合性太高,开发不方便
- 未来还有样式文件,
- 因此我们可以将模板抽离出来,因此可以定义.vue为后缀的文件
- .vue后缀的文件也被称为单文件组件, 一个文件就是一个组件
- 只不过是将模板(html), JS, 样式(style)分开
- 使用
vue-loader来处理.vue的文件, 注意vue-loader伴生插件使用 - 使用
vue-template-compiler来编译template模板
配置.vue文件
<template>
<div class="">
{{ msg }}
</div>
</template>
<script>
export default {
name:"",
data(){
return {
msg:"Hello World"
}
}
}
</script>
<style>
</style>
在webpack.config.js中配置解析.vue的loader
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const {resolve} = require("path");
module.exports = {
// ....
module:{
rules:[
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template:"./src/index.html"
}),
new VueLoaderPlugin()
],
// ....
}
3. 在webpack配置省略后缀名
webpack.config.js
module.exports = {
// ...
resolve: {
// 配置省略后缀名
extensions: [".js",".json",".vue"],
// alias :配置别名
alias: {
"vue":"vue/dist/vue.esm.js"
}
}
}
这样 在导入.vue文件时就可以省略后缀名了
