vue.js开发外卖App项目的组件拆分总结(五)
2017-10-08 20:02
916 查看
static目录下css中有reset.css文件,开发一个前端页面,需要将一些标签默认页面reset掉。采用的是http://cssreset.com官网提供的样式。
在入口文件:index.html中引入reset.css文件,还有移动端的视口不能缩放,有个初始的宽和高设置,
可以通过配置eslintrc.js文件修改一些规则,比如:indent:0表示关于空格的规则取消。
在eslint的规则中,当new 一个对象时,是需要赋值给一个变量的,而vue可以不用赋值,所以
代码表示跳过这个规则。
header名字与html5原生的header标签名重复
如以上代码所示:在注册组件时,起个别名
样式如下:
源码并没有写兼容性的代码,比如以下是flex在不同浏览器兼容性的写法
如下图所示,因为vue-loader依赖了一个postcss插件,这些插件会自动帮我们搞定css兼容问题。
在package.json中配置
vue-router的使用
使用vue-router的官方模板,html模板编写如下:使用指令v-link进行导航
对应项目中的配置如下:
以上:路由外链router-view的作用:当我们改变路由,会刷新router-view中包含的内容。
vue-router的js文件的配置
需要注意两点:(1)通过
关于目录在webpack的webpack.base.conf文件中的配置。好处:在其他组件引用该组件时,不用每次写绝对路径,写相对路径即可。作用:将common目录映射到../src/common
路由的实现:其实是改变哈希值
在入口文件:index.html中引入reset.css文件,还有移动端的视口不能缩放,有个初始的宽和高设置,
可以通过配置eslintrc.js文件修改一些规则,比如:indent:0表示关于空格的规则取消。
在eslint的规则中,当new 一个对象时,是需要赋值给一个变量的,而vue可以不用赋值,所以
/* eslint-disable no-new */
代码表示跳过这个规则。
项目中需要引入stylus
在package.json文件中devDependencies对象中添加stylus-loader,然后执行npm install,然后node-modules中就有stylus-loader。header名字与html5原生的header标签名重复
<v-header :seller="seller"></v-header> export default{ components: { 'v-header': header } }
如以上代码所示:在注册组件时,起个别名
v-header
flex布局的应用
实现商品,评论和商家三列等分布局这块在app.vue文件中 <template> <div> <v-header :seller="seller"></v-header> <div class="tab border-1px"> <div class="tab-item"> <a v-link="{path:'/goods'}">商品</a> </div> <div class="tab-item"> <a v-link="{path:'/ratings'}">评价</a> </div> <div class="tab-item"> <a v-link="{path:'/seller'}">商家</a> </div> </div> <router-view :seller="seller" keep-alive></router-view> </div> </template>
样式如下:
.tab display: flex //key code width: 100% //key code height: 40px line-height: 40px .tab-item flex: 1 //key code text-align: center
源码并没有写兼容性的代码,比如以下是flex在不同浏览器兼容性的写法
display: -webkit-box; display: -ms-flexbox; display: flex;
如下图所示,因为vue-loader依赖了一个postcss插件,这些插件会自动帮我们搞定css兼容问题。
"vue-loader": "^8.3.0",出现在package.json文件的devDependencies选项中,要使用必须配置。
vue-router的使用
vue-router的配置:在package.json中配置
"vue-router":"^0.7.13",,然后npm install,安装vue-router,在node-module模块中可以找到。
"dependencies": { "vue": "^1.0.21", "vue-resource":"^1.0.1", "vue-router":"^0.7.13", "babel-runtime": "^6.0.0", "better-scroll": "^0.1.7" }
vue-router的使用
在main.js文件中 import VueRouter from 'vue-router'; Vue.use(VueRouter);//如果使用common.js模块,需要显式的使用vue.use()安装路由模块
使用vue-router的官方模板,html模板编写如下:使用指令v-link进行导航
对应项目中的配置如下:
这块在app.vue文件中 <template> <div> <v-header :seller="seller"></v-header> <div class="tab border-1px"> <div class="tab-item"> <a v-link="{path:'/goods'}">商品</a> </div> <div class="tab-item"> <a v-link="{path:'/ratings'}">评价</a> </div> <div class="tab-item"> <a v-link="{path:'/seller'}">商家</a> </div> </div> <router-view :seller="seller" keep-alive></router-view> </div> </template>
以上:路由外链router-view的作用:当我们改变路由,会刷新router-view中包含的内容。
vue-router的js文件的配置
这块在main.js中配置 var app = Vue.extend(App);// 路由器需要一个根组件 var router = new VueRouter({//实例化一个router linkActiveClass: 'active' //这个选项配置当link是active时,指定的类名为active,实现了当我们选中某个tab,然后那个Link会被激活,应用active样式 }); //通过map方法配置路由 router.map({ '/goods': { component: goods }, '/ratings': { component: ratings }, '/seller': { component: seller } }); router.start(app, '#app');//通过start方法将app挂载点传入 // router.go('/goods'); //该方法是router提供的API,页面默认进入goods页面
需要注意两点:(1)通过
var app = Vue.extend(App);代替new Vue实例(2)通过start方法将app挂载点传入
关于目录在webpack的webpack.base.conf文件中的配置。好处:在其他组件引用该组件时,不用每次写绝对路径,写相对路径即可。作用:将common目录映射到../src/common
路由的实现:其实是改变哈希值
相关文章推荐
- vue.js开发外卖App项目的组件传值总结(七)
- vue.js开发外卖App项目的vue-resource总结(六)
- vue.js开发外卖App项目的内容总结(四)
- vue.js开发外卖App项目总结之webpack的详细配置(三)
- 开发cocos2d-js项目总结(js3.6版本)
- Android开发学习总结(三)——appcompat_v7项目说明
- Android App项目开发规范总结(三)
- Android app项目开发步骤总结
- Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结
- Vue.js 父子组件通讯开发实例
- iOS App开发中的UISegmentedControl分段组件用法总结
- vue.js 开发生态总结
- require.js+vue+vue-router+vue-resource开发微信上传图片组件
- 关于vue.js弹窗组件的知识点总结
- 前端开发工具vue.js开发实践总结
- wpf首次项目开发技术总结之app.xaml
- Android App项目开发规范总结(二)
- 自己在项目管理中总结的 APP 开发流程(适用于创业项目快速迭代)
- Android App项目开发规范总结(一)