vue-cli 全局安装
命令行执行 : npm install -g vue-cli // 加-g是安装到全局
安装完成以后 可以输入命令 :vue 回车,可以看到针对vue的命令行;
初始化项目
执行命令: vue init webpack demo(你新建的项目名称/文件名称)
执行之后将会 自动初始化一个文件夹 :demo
npm install //安装依赖
npm run dev
App.vue
<template>
<div id='app'>
<v-header></v-header>
<div class='tab'>
<div class='tab-item'>
<router-link to="/goods">商品</router-link>
</div>
<div class='tab-item'>
<router-link to="/ratings">评论</router-link>
</div>
<div class='tab-item'>
<router-link to="/seller">商家</router-link>
</div>
</div>
<div class='content'>
<router-view></router-view>
</div>
</div>
</template>
<script>
import header from './components/header/header.vue'
export default{
components:{
'v-header':header
}
}
</script>
<style>
.tab{
width:100%;
height:40px;
line-height:40px;
display:flex;
}
.tab .tab-item{
flex:1;
text-align:center;
}
</style>
main.js //定义路由
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router' //配置文件中为'vue-router
import goods from './components/goods/goods.vue'
import ratings from './components/ratings/ratings.vue'
import seller from './components/seller/seller.vue'
import VueResource from 'vue-resource'
Vue.use(VueRouter)
Vue.config.productionTip = false
const routes = [
{ path: '/goods', component:goods},
{ path: '/ratings', component:ratings},
{ path: '/seller', component:seller}
]
const router = new VueRouter({
routes // routes: routes 的简写
})
const app = new Vue({
el:'#app',
router,
components: { App },
template: '<App/>'
})
header.vue //公用组件
<template>
<div class='header'>
我是header
</div>
</template>
<script>
export default{}
</script>
<style>
.header{
width:100%;
height:60px;
line-height:60px;
font-size:18px;
text-align:center;
color:#999;
}
</style>
goods.vue
<template>
<div>I am goods</div>
</template>
<script>
export default{}
</script>
<style></style>
seller.vue
<template>
<div>I am seller</div>
</template>
<script>
export default{}
</script>
<style></style>
ratings.vue
<template>
<div>I am ratings</div>
</template>
<script>
export default{}
</script>
<style></style>