webpack+vue.js实现组件化详解

前端之家收集整理的这篇文章主要介绍了webpack+vue.js实现组件化详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

简介

在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了。

建立vue组件

在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下:

生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |--components //组件存放文件夹 | |--app.vue //组件 | |--main.js //主js文件 |--index.html //主html文件 |--package.json |--webpack.config.js //webpack配置文件

首先在index.hmtl中写入代码

<Meta charset="UTF-8"> Vue example