Vue组件使用

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Header.vue
│ │ ├── Home.vue
│ │ └── News.vue

App.vue

Header.vue

Home.vue

News.vue

五 运行

npm run dev

image.png

六 总结

1 组件使用
《1 新建vue文件，创建填充组件内容
《2 在要使用组件的地方，导入组件，并注册组件标签
import Home from './components/Home.vue';

export default {
components:{
'v-home':Home,
}
};

《3 在html标签，使用标签来使用组件
如：

七 参考

https://cn.vuejs.org/v2/guide/components.html