# 10. Vue + webpack

# 基础集成

# 1)添加依赖

cnpm install vue -S
cnpm install vue-loader vue-template-compiler -D

1
2

# 2)配置`webpack.config.js`

const { VueLoaderPlugin } = require('vue-loader');

添加plugins插件

plugins: [
    new VueLoaderPlugin()
]

1
2
3

在module节点的rules节点中添加一行匹配规则

{ test: /\.vue$/, use: 'vue-loader' }

# 3)创建`.vue`组件模板文件

组件模板分三部分组成

template
script
style

<template>
    <div>
        <h3>这是vue文件的组件</h3>
    </div>
</template>
<script>

</script>
<style>

</style>

1
2
3
4
5
6
7
8
9
10
11

# 4)`main.js`中引入组件模板

import Vue from 'vue'
import login from './login.vue'

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    // render: function (createElements) {
    //     // 这里 return 结果会替换页面中el指定的容器
    //     return createElements(login) 
    // }
    // 上述简写如下所示
    render: c => c(login)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上述示例出现的属性 render，他支持runtime-only模式，以替换节点内容形式渲染组件模板。

# 5)运行

<!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>Vue-Webpack整合使用</title>
</head>
<body>
    <div id="app">
        
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

npm run dev

等同于 webpack-dev-server --port 80 --contentBase src --open --hot

# 集成Vue-router

导入依赖

cnpm install vue-router -S

创建router.js文件,方便分类管理

import VueRouter from 'vue-router'

// 路由
import xxx from './xxx/xxx/xxx.vue'

const routes = [
    { path: '/xxx', component: xxx},
]

export default new VueRouter({ routes })

1
2
3
4
5
6
7
8
9
10

最后暴露该对象，并在mian.js引入。

'main.js`引入router

// 导入 VueRouter
import VueRouter from 'vue-router'
import router from './router.js'
// 注册 VueRouter
Vue.use(VueRouter)

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {},
    // 挂载 router
    router
})

1
2
3
4
5
6
7
8
9
10
11
12
13

← 9. webpack 大型Vue组件库 →