webpack中配置vue

一.下载使用vue

注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

在main.js中引用vue

重新打包，运行程序，报错:

这个错误说的是我们使用的是runtime-only版本的Vue,应该使用runtime-compiler

所以我们修改webpack的配置，添加如下内容即可：

 二.el和template区别

 el:el用于指定Vue要管理的DOM，与index.html 中的 #app 进行绑定，让Vue实例之后可以管理它其中的内容，可以帮助解析其中的指令、事件监听等

 template：如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

template模板的简化写法：

将vue实例中的template模板和data,methods等抽象成一个组件，在vue实例的compoments中注册，在template中使用这个组件，但是一个组件以对象的方式编写非常不方便，因此

三. vue文件的封装和处理 

将vue组件写在vue文件中

template模板内容写在template标签中，vue实例的其他部分用eport default导出，样式写在style标签中

但是要处理vue文件，需要使用

vue-loader以及vue-template-compiler（vue2） ：

安装：

npm install vue-loader vue-template-compiler --save-dev

修改webpack.config.js的配置文件：

vue3:npm i inatall vue-loader @vue/compiler-sfc

须添加@vue/compiler-sfc来对template进行解析：

另外我们需要配置对应的Vue插件：

 

 

 四.在webpack环境下使用vue开发

index.html中引入app.js，app.js中 new Vue(),import其他vue组件，并注册为vue实例的子组件，这样就可以在vue实例的template中引用该组件，该组件的内容最终会替换index.html文件中id=app的内容 ，项目开发中的其他内容都写成vue文件的形式，再通过子组件的形式引入