# Vue结合Webpack
后续的开发，会采用Vue组件化开发的方式，而且每个组件都是一个单文件形式后缀名为(.vue)。写法如下：
```
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
```
会发现 `结构` `样式` 和 `功能` 都分开。这样易于管理。那么对于这种后缀名为`.vue`的文件该如何处理呢？Vue官方给我们提供了`Vue Loader`
## 配置
你应该将`vue-loader`和`vue-template-compiler`一起安装。
```
npm install -D vue-loader vue-template-compiler vue-style-loader
```
### webpack 配置
Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将`vue-loader`应用到所有扩展名为`.vue`的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：
```
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.js` 文件
// 以及 `.vue` 文件中的 `<script>` 块
{
test: /\.js$/,
loader: 'babel-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// 请确保引入这个插件来施展魔法
new VueLoaderPlugin()
]
}
```
## 打包项目错误信息
打包过程没有任何错误(因为只是多打包了一个vue的js文件而已)
。但是运行程序，没有出现想要的效果，而且浏览器中有报错
这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？
这里我只说解决方案：[Vue不同版本构建](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)，后续我具体讲解`runtime-only**`仅有运行时\*\*和`runtime-compiler运行时编译`的区别。
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：
:-: 
```
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
```
## 那如何解决
#### webpack
```
module.exports = {
// ...
resolve: {
alias: {
//别名
'vue$': 'vue/dist/vue.esm.js'
}
}
}
```
## 思考题
### 正常运行之后，我们来考虑另外一个问题：
>[warning] 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
> 如果我们后面自定义了组件，也必须修改index.html来使用组件
> 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？
### src/main.js
```
import Vue from 'vue';
Vue.component('my-component',{
template:`<div>
你好
</div>`
})
new Vue({
el:'#app',
});
```
## src/index.html
```
<div id="app">
<my-component></my-component>
</div>
```
>[success] 解决
> 通过`template` 属性来进行解决。这样我们就不用修改`html` 结构
```
src/index.html
<div id="app"></div>
src/main.js
import Vue from 'vue';
Vue.component('my-component',{
template:`<div>
你好
</div>`
})
new Vue({
el:'#app',
template: `<my-component></my-component>`
});
```
### `el`属性
在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
且只有实例才具有这个属性。组件是不具备这个属性的。
### `template`属性的作用
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
对于template复杂内容，之后会用`.vue`文件来创建组件。会分成三部分书写 `template script style`.管理和维护更方便。
## .vue文件组件化
### 定义组件
`src/components/MyCom.vue`
```
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
name:'',
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
```
### 使用组件
`src/main.js`
```
import MyCom from './components/MyCom.vue'
new Vue({
el:'#app',
template: `<my-com></my-com>`
});
```
