在 webpack中 Vue 使用组件模板 .vue

ゝ一纸荒年。 2022-12-20 11:17 168阅读 0赞

1，在webpack中 使用vue这个组件模板文件来定义组件，所以要安装能解析这种文件的 Loader :  
cnpm i vue-loader vue-template-compiler -D  
2，需要在webpack中新增这个vueLoaderPlugin，Vue Loader 的配置和其它的 loader 不太一样，**【重要】需要添加第一步和第二部**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]  
3，定义一个 .vue 结尾的组件， 其中组件有三部分构成：template script style，如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]  
4，在 main.js 文件中导入 vue 和 .vue 组件模板：  
import Vue from ‘vue’  
import login from ‘./login.vue’  
通过.vue 文件引入的组件，则使用render:function()\{\} 来定义 而不是之前的commpent：\{\}  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3f2b4497155145cca5572bb51946c6cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/2ddd0cb720ad4a59be0524f79d55050d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/2020111123204730.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center