准备工作(三)

# index.html文件添加相关<meta>标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0,user-scable=no">

# index.html引入reset.css文件

<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组件的编辑。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容