06、webpack - 使用 Vue的配置过程

49 阅读1分钟

安装配置

1、下载Vue

image.png

不需要加 -dev 是因为 此Vue在运行时候也需要

2、在入口文件导入 (main.js)

image.png

3、使用 (index.html)

image.png

4、解决 runtime-only问题 (后面会讲)

image.png

注 : 与module同级

el和template区别

正常运行后,data若要显示到界面中,那么就得修改index.html,如果我们后面自定义了组件,那么也必须修改index.html 来使用组件;但是html模板在之后的开发中,并不希望手动的来频繁修改,那该如何?

  • 定义 template属性:

1、在前面的Vue实例中,我们定义了el属性,用于和index.html中的#app进行绑定,让vue实例可以管理它的内容

初版1

2、这里,我们可以把div里面的元素删除掉

image.png

3、如果我们仍希望将其元素显示到页面中,那么我们可以再定义一个template属性

image.png

初版2

1、把需要显示的内容放到一个子组件中

image.png

2、在父组件中引入这个子组件

image.png

template 里面的组件会解析

初版3

因为此时封装的子组件是一个对象,那么我们可以把封装的子组件利用es6模块化暴露出去

1、创建文件

image.png

2、暴露

image.png

3、导入 (main.js)

image.png

4、使用

image.png

最终版

把模板和js代码进行分离

1、创建文件

image.png

2、进行分离

image.png

3、导入

image.png

4、进行安装对应的loader

image.png

注意版本号

5、配置 (webpack.config.js)

image.png

6、若想使用多个vue文件

6.1、创建 image.png

6.2 引入使用 (在App.vue中)

image.png

image.png

image.png

7、这样的话,只需要在入口文件(main.js)中 把App.vue引入即可