webpack的vue
webpack的vue
### 简单安装使用vue
如果需要使用vue，必须使用npm先安装vue。
```shell
npm install vue --save
```
使用vue简单开发。
> 准备工作
复制`03-webpack的loader`到同级目录，改名为`04-webpack的vue`，并在`04-webpack的vue`根目录执行`npm install vue --save `，下载安装vue。
**1.在入口文件main.js导入已安装的vue，并在index.html声明要挂载的div。在main.js加入以下代码。**
```javascript
//6.使用vue开发
import Vue from 'vue'
const app = new Vue({
el: "#app",
data: {
message: "hello webpack and vue"
}
})
```
修改index.html代码，添加
```html
<div id="app">
<h2>{{message}}</h2>
</div>
```
**2.再次打包`npm run build`后打开index.html**
发现message并没有正确显示，打开console发现vue报错。错误提示我们，正在使用`runtime-only`构建，不能将template模板编译。
> 1.`runtime-only`模式，代码中不可以有任何template，因为无法解析。
>
> 2.`runtime-complier`模式，代码中可以有template，因为complier可以用于编译template。
在webpack中配置，设置指定使用`runtime-complier`模式。
> webpack.config.js
```javascript
resolve: {
// alias:别名
alias: {
//指定vue使用vue.esm.js
'vue$':'vue/dist/vue.esm.js'
}
}
```
**3.重新打包，显示正确**
### 15.4.2 如何分步抽取实现vue模块
> 创建vue的template和el关系
>
> el表示挂载DOM的挂载点
>
> template里面的html将替换挂载点
一般我们使用vue会开发单页面富应用(single page application)，只有一个index.html，而且index.html都是简单结构。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack入门</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
```
**1.第一次抽取，使用template替换`<div id="app"></div>`。**
> 修改mian.js的vue相关代码
```javascript
//6.使用vue开发
import Vue from 'vue'
new Vue({
el: "#app",
template:`
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>这是一个按钮</button>
<h2>{{name}}</h2>
</div>
`,
data: {
message: "hello webpack and vue",
name: 'zzzz'
},
methods: {
btnClick(){
console.log("按钮被点击了")
}
},
})
```
使用template模板替换挂载的id为app的div元素，此时不需要修改html代码了，只需要写template。
再次打包，显示成功。
**2.第二次抽取，使用组件化思想替换template**
考虑第一次抽取，写在template中，main.js的vue代码太冗余。
> 修改main.js的代码
```javascript
//1.定义一个组件
const App = {
template: `
<div>
<h2>{{message}}</h2>
<button @click='btnClick'>这是一个按钮</button>
<h2>{{name}}</h2>
</div>
`,
data() {
return {
message: "hello webpack and vue",
name: 'zzzz'
}
},
methods: {
btnClick(){
console.log("按钮被点击了")
}
},
}
```
> 修改main.js，vue实例中注册组件，并使用组件
```javascript
new Vue({
el: "#app",
//使用组件
template: '<App/>',
components: {
//注册局部组件
App
}
})
```
再次使用`npm run build`打包，打包成功，显示和使用template替换div一样。
**3.第三次抽取组件对象，封装到新的js文件，并使用模块化导入main.js**
此处我的vue-loader是15.7.2。
将其修改为13.0.0
```json
"vue-loader": "^13.0.0"
```
重新安装版本
```shell
npm install
```
再次打包，打包成功，样式生效了。
**6.组件化开发**
我们使用app.vue分离了模板、行为、样式，但是不可能所有的模板和样式都在一个vue文件内，所以要用组件化。
在vue文件夹下新建一个Cpn.vue文件
> Cpn.vue组件
```vue
<template>
<div>
<h2 class='title'>{{name}}</h2>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "Cpn",
data() {
return {
name: "组件名字是Cpn"
};
}
};
</script>
<style scoped>
.title {
color: red;
}
</style>
```
将Cpn.vue组件导入到App.vue
```vue
<template>
<div>
<h2 class='title'>{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
<!-- 使用Cpn组件 -->
<Cpn/>
</div>
</template>
<script type="text/ecmascript-6">
//导入Cpn组件
import Cpn from './Cpn.vue'
export default {
name: "App",
data() {
return {
message: "hello webpack",
name: "zzz"
};
},
methods: {
btnclick() {}
},
components: {
Cpn//注册Cpn组件
}
};
</script>
<style scoped>
.title {
color: green;
}
</style>
```
再次打包，打开index.html，cpn组件的内容显示
基于此，一个vue文件可以依赖导入很多vue文件，组成一个单页面富应用。
> 如果你在使用ES6语法导入模块时候想要简写的时候，例如这样省略`.vue`后缀
```javascript
import Cpn from './Cpn'
```
可以在`webpack.config.js`中配置：
```javascript
resolve: {
//导入模块简写省略指定后缀
extensions: ['.js', '.css', '.vue'],
// alias:别名
alias: {
//指定vue使用vue.esm.js
'vue$':'vue/dist/vue.esm.js'
}
}
浙公网安备 33010602011771号