# index.html文件添加相关<meta>标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
# 在src目录下创建router文件夹,并再文件夹内创建index.js文件
import Vue from 'vue' //引入vue插件
import Router from 'vue-router' //引入vue-router插件
Vue.use(Router) //全局注册Router插件
export default new Router({ //创建Router实例,并导出
routes: [
{
path:'/main',component: Home
},
{
path:'/search',component: search,
children: [ //创建子路由
{path:'/',component: searchDef},
{path:'searchResult',component: searchRes}
]
},
]
})
--> main.js文件引入router路由,并生成实例
import router from './router'
newVue({
el:'#app',
router,
template:'',
components: { App }
})
--> app.vue总组件内插入<router-view>槽
<templete>
<div id="app">
<router-view><router-view>
</div>
</templete>
# main.js文件 引入vue-resource插件,并全局注册,这样就可以在各个components的vue组件内使用vue-resourve处理前后端交互(类似于$ajax)
import Vue from 'vue' //引入vue插件
import Resource from 'vue-resource' //引入vue-resource插件
Vue.use(Resource) //全局注册
#express插件的使用(美团外卖教学视屏用到此插件)
??? (但是公司项目却没用到)
==>至此准备工作大致好了,可以开始进行components组件的编辑。