03-开始项目

1 项目首页index.html中引入 reset.css

   CSSReset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSSReset)

http://meyerweb.com/eric/tools/css/reset/ 网址下载reset.css文件；

引入语句

<link rel="stylesheet" href="./static/css/reset.css">

2 添加移动端app的viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

3 解决点击响应延时 0.3s 问题

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

<script>

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded',function() {

FastClick.attach(document.body);

},false);

}if(!window.Promise) {

document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');

}

</script>

4 项目使用vue-router

4.1 下载vue-router

cnpm install vue-router --save

4.2 创建router导航目录src/pages

并在该目录下创建响应的vue组件

略

4.3 创建底部导航目录src/components

并创建 FooterGuide/FooterGuide.vue组件

4.4 创建路由配置文件src/router/index.js

内容：

import Vuefrom 'vue'

import VueRouterfrom 'vue-router'

//导入自定义路由组件

import Homefrom '../pages/Home/Home.vue'

import Orderfrom '../pages/Order/Order.vue'

import Profilefrom '../pages/Profile/Profile.vue'

import Searchfrom '../pages/Search/Search.vue'

//在Vue中注册使用路由

Vue.use(VueRouter)

export default new VueRouter({

routes:[

{

path:'/',

redirect:'/home'

    },

{

path:'/home',

component:Home

},{

path:'/order',

component:Order

},{

path:'/profile',

component:Profile

},{

path:'/search',

component:Search

}

]

})

4.5 修改主入口文件src/main.js

内容：

import Vuefrom  'vue'

import Appfrom  './App.vue'

//导入自己定义的路由目录/router，由于目录中有index.js文件，系统会自动识别

import router  from './router'

new Vue({

el:'#app',

render:h=>h(App),

router  //在项目创建的Vue中引用router对象，与上面import中的router同名，自动连接配置

})

4.6 创建主界面组件 src/App.vue

在当前vue组件中添加导航框架

<template>

<div id="m_main">

<router-view></router-view>

<FooterGuide></FooterGuide>

</div>

</template>

<script>

import FooterGuidefrom './components/FooterGuide/FooterGuide.vue'

    export default {

name:"App",

components: {FooterGuide},

comments:{

FooterGuide

}

}

</script>

<style lang="stylus" rel="stylesheet/stylus">

#m_main

      width 100%

      height 100%

      background #f5f5f5

</style>

好了，我们准备开始进行进一步的开发了