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>
好了，我们准备开始进行进一步的开发了
