接触vue-cli之后, 感觉这才是打开vue的正确姿势.
或者说,更容易理解,vue体现了组件化.
所有vue文件都相当于是一个组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div id="app">
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from './components/MyComponent'
export default {
name : "MyComponent",
components: {
MyComponent
}
}
</script>
<style>
</style>
import 引入的都是 对象,定义变量接收. 这里引入的是vue组件, export default 用来导出
template 就是之前我们接触的 template, 可以放在 js里,用属性的形式定义, 也可以放在上面,用于编写 html结构.
所有的依赖关系都可以根据 import 和 export 来看清. 只有最后一环, main.js 和 index.html 是用一个插件来进行注入的.
1
2
3
4
5
new HtmlWebpackPlugin({//***** 我们明明没有在index.html里引入任何js文件
filename: 'index.html',//**** 就是靠这个插件把 js文件插进去的.
template: 'index.html',
inject: true// true的时候 插进去, false 的时候不插进去.
}),
就这个在webpack.dev.conf.js文件里.
学到这里就变成了, 怎么分割组件的问题.
