webpack——导入vue组件

首先创建一个.vue后缀结尾的vue文件

然后在main.js中导入vue组件文件，然后在vue实例中注册该组件

报错，需要安装解析vue文件的第三方loader加载器

使用命令

• cnpm install --global vue-cli
• cnpm install vue
• cnpm install vue-loader vue-template-compiler loader-utils （ vue-loader依赖于vue-template-compiler）

 此时在命令窗口中 使用命令

• cnpm i vue-loade -D
• cnpm i vue-template-compiler -D

在当前项目安装vue的加载器。

安装完成后的版本号如下

在webpack.config.js配置文件中新增loader规则

所有配置完成，在index.html页面中使用导入的组件

注意：新增组件标签不会热更新到页面，需手动刷新页面

 

----------补充

在组件中一般使用export default 来暴露成员对象

 

 

END