# 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組件的編輯。
