vue-组件
1、安装vue-cli:
cnpm install -g vue-cli
2、初始化
vue init webpack-simple myProject
3、安装
cnpm install
4、运行
cnpm run dev
App.vue代码如下:
<template> <div> <Vheader></Vheader> <Vcontent></Vcontent> <Vfooter></Vfooter> </div> </template> <script> import Vheader from './components/Vheader' import Vcontent from './components/Vcontent' import Vfooter from './components/Vfooter' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, components: { Vheader, Vcontent, Vfooter } } </script> <style> </style>
Vheader.vue
<template> <header> {{msg}} </header> </template> <script> export default { name: 'Vheader', data(){ return { msg: '我是头部!' } } } </script> <style> </style>
Vcontent.vue
<template> <div> {{msg}} </div> </template> <script> export default { name: 'Vcontent', data(){ return { msg: '我是中部!' } } } </script> <style> </style>
Vfooter.vue
<template> <footer> {{msg}} </footer> </template> <script> export default { name: 'Vfooter', data(){ return { msg: '我是脚部!' } } } </script> <style> </style>