饿了么–vue项目总结

作者 : admin 本文共4774个字,预计阅读时间需要12分钟 发布时间: 2021-10-28 共1人阅读

饿了么–vue项目总结

github源码地址:饿了么项目源码

饿了么项目包含以下三个方面的技术点,以及所了解的知识。
1.    流程及开发方法:

  •     组件化、模块化的开发模式
  •     学会模拟json后端数据,前后端分离开发
  •     了解webpack的打包原理

2.    第三方组件

  • 学会使用vue-router开发单页应用
  • 学会使用vue-resource与后端数据交互
  • 学会如何在Vue.js框架里和第三方JS插件交互

3.     设计思想与模式

  • 了解移动端设备像素比的概念
  • 学会解决移动端1px边框问题
  • 学会移动端经典的css sticky footer布局
  • 学会flex弹性布局

第一个方面从webpack设置入手:

在build/webpack.base.conf.js文件下,可以看到基本的webpack设置(出入口文件位置,后缀补充以及别名等):

  1. module.exports = {
  2. context: path.resolve(__dirname, ‘../’),
  3. // webpack编译的入口文件
  4. entry: {
  5. app: ‘./src/main.js’
  6. },
  7. output: {
  8. path: config.build.assetsRoot,
  9. // 生成的文件名字
  10. filename: ‘[name].js’,
  11. // 请求的静态资源的绝对路径
  12. publicPath: process.env.NODE_ENV === ‘production’
  13. ? config.build.assetsPublicPath
  14. : config.dev.assetsPublicPath
  15. },
  16. resolve: {
  17. // 自动补全文件后缀
  18. extensions: [‘.js’, ‘.vue’, ‘.json’],
  19. // 别名,只针对于js库,css的引入还是要写相对路径,不能省略
  20. alias: {
  21. ‘@’: resolve(‘src’),
  22. // vue:’vue/dist/vue.js’,
  23. ‘components’: path.resolve(__dirname, ‘../src/components’),
  24. ‘common’: path.resolve(__dirname, ‘../src/common’), //当在js文件中import其他文件时路径直接写commont相当于../src/common
  25. }
  26. },

 

然后在webpack.dev.conf.js文件中,设置了数据所在的位置,用于模拟后端数据的获取。

  1. // 数据获取
  2. var express = require(‘express’) // express 是nodejs框架
  3. var apiServer = express()
  4. var bodyParser = require(‘body-parser’)
  5. apiServer.use(bodyParser.urlencoded({ extended: true }))
  6. apiServer.use(bodyParser.json())
  7. var apiRouter = express.Router()
  8. var fs = require(‘fs’)
  9. apiRouter.route(‘/:apiName’) //接口路径
  10. .all(function (req, res) {
  11. fs.readFile(‘./db.json’, ‘utf8’, function (err, data) { //读取接口文件
  12. if (err) throw err
  13. var data = JSON.parse(data)
  14. if (data[req.params.apiName]) {
  15. res.json(data[req.params.apiName])
  16. }
  17. else {
  18. res.send(‘no such api name’)
  19. }
  20. })
  21. })
  22. // 数据所在的位置
  23. apiServer.use(‘/api’, apiRouter);
  24. apiServer.listen(3000, function (err) {
  25. if (err) {
  26. console.log(err)
  27. return
  28. }
  29. console.log(‘Listening at http://localhost:’ + 3000 + ‘\n’)
  30. })

 

之后config/index.js目录下

  1. module.exports = {
  2. dev: {
  3. // Paths
  4. assetsSubDirectory: ‘static’, //被webpack编译处理过的资源文件都会在这个目录下
  5. assetsPublicPath: ‘/’, //根目录
  6. proxyTable: {                //解决跨域问题
  7. ‘/api’: ‘http://localhost:3000/’
  8. },
  9. // Various Dev Server settings
  10. host: ‘localhost’, // can be overwritten by process.env.HOST
  11. port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  12. autoOpenBrowser: false,
  13. errorOverlay: true,
  14. notifyOnErrors: true,
  15. poll: false,
  16. devtool: ‘cheap-module-eval-source-map’, //编译输出格式
  17. },
  18. }

 

webpack打包原理:

现象:假如说需要引入一大堆的js/css文件,且相互之间还存在引用关系,手动处理的时候就得按照一定的顺序。

解决:webpack将一大堆的文件都从一个入口引入,然后自动处理。(将模块的前后关系打包成一个js,指定js的单独打包等等),webpack实现模块化的管理。

功能:

1、根据模板生成html,并且自动处理上面的css/JS引用路径

2、自动处理img里图片路径,css样式中背景图的路径…字体引用

3、开启本地服务器,变写代码边自动更新页面内容

4、编译jsx、es6、sass、less、coffeescript等等并添加md5、sourcemap等辅助

5、异步加载内容,比如弹出框,不需要时不加载到dom

6、配合vue.js、react等框架开发等。

第二方面vue的主要文件设置:

 

根目录下的index.html设置viewport移动端视图,并且引入重置样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>vueeleme</title>
  6. <meta name=“viewport” content=“width=device-width,inital-scale=1.0,
  7. maximum-scale=1.0,user-scalable=no”> // 这个meta标签使得页面宽度等于设备宽度,页面的缩放默认为1,且用户不能缩放。
  8. <link rel=“stylesheet” href=“./static/css/reset.css”>    //基础样式重置
  9. </head>
  10. <body>
  11. <div id=“app”></div>        //挂载所需的id(在main.js中设置)
  12. <!– built files will be auto injected –>
  13. </body>
  14. </html>

 

main.js: 导入VueRouter 管理路由, 导入 VueResource实现数据交互。

  1. ///main.js文件部分内容:
  2. const routes = [        //设置路由及相应组件
  3. {
  4. path:‘/’,
  5. redirect:“goods”    //根目录下重定向到主页面
  6. },
  7. {
  8. path:‘/goods’,        //不同的路由使用不同的组件
  9. component:goods
  10. },
  11. {
  12. path:‘/ratings’,
  13. component:ratings
  14. },{
  15. path:‘/seller’,
  16. component:seller
  17. }
  18. ]
  19. const router = new VueRouter({        //将路由导入VueRouter
  20. mode:‘history’, //可以去掉#
  21. ‘linkActiveClass’: ‘active’,
  22. routes
  23. })
  24. const app = new Vue({            //渲染App.vue, 挂载到idnex.html中的#app中
  25. router,
  26. render: h => h(App)
  27. }).$mount(‘#app’)

 

App.vue 头部采用组件的形式,导航采用flex布局三等分,内容利用路由router-view进行显示。

  1. <template>
  2. <div>
  3. <!– 头部 –>
  4. <v-header :seller=“seller”></v-header>        //组件化
  5. <!– 中部导航栏 –>
  6. <div class=“tab border-1px”>                  //flex三等分布局
  7. <div class=“tab-item”>
  8. <router-link to=“/goods”>商品</router-link>
  9. </div>
  10. <div class=“tab-item”>
  11. <router-link to=“/ratings”>评论</router-link>
  12. </div>
  13. <div class=“tab-item”>
  14. <router-link to=“/seller”>商家</router-link>
  15. </div>
  16. </div>
  17. <!– 路由改变时,显示相应的内容 –>
  18. <keep-alive>
  19. <router-view :seller=“seller”></router-view>            //父组件传递数据
  20. </keep-alive>
  21. </div>
  22. </template>

 

第三方面设计思路:

设备像素比:devicePixelRatio,视觉稿是以iphone6的375×667屏幕屏幕高度作为基准,为了达到高清效果,视觉稿的画布大小会是基准的2倍。(对iphone6而言:原先的375×667,就会变成750×1334)。而在设计时候的数值为设计稿上的一半。

并且需要知道:1px 的 CSS 像素并不一定等于 1px 的物理像素,不同的设备会根据其对应设备像素比决定使用多少个物理像素显示 1px 的 CSS 像素。所以,在移动端不建议使用 px 作为布局单位,而是应该使用 rem 或者百分比作为布局单位

参考链接:理解设备像素比

    移动端1px边框:   利用伪类元素设置边框

  1. border-1px($color)
  2. position : relative
  3. &:after
  4. display: block
  5. position: absolute
  6. left: 0
  7. bottom: 0
  8. border-top 1px solid $color
  9. width: 100%
  10. content: ”

 

“Sticky Footer”:  指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

参考链接: 各种CSS实现Sticky Footer

饿了么–vue项目总结插图

 

 

自适应布局:flex,两端的line自适应

饿了么–vue项目总结插图(1)

  1. html:
  2. <div class=“title”>
  3. <div class=“line”></div>
  4. <div class=“text”>优惠消息</div>
  5. <div class=“line”></div>
  6. </div>

 

  1. CSS:
  2. .title
  3. display: flex
  4. margin: 28px auto 24px auto
  5. width:80%
  6. .line
  7. flex:1
  8. position:relative
  9. top: –6px
  10. border-bottom:1px solid rgba(255,255,255,.2)
  11. .text
  12. padding:0 12px
  13. font-size:14px
  14. font-weight:700

滴石it网-Java学习中高级和架构师教程_Java企业级开发项目实战下载 » 饿了么–vue项目总结

常见问题FAQ

发表评论

开通VIP 享更多特权,建议使用QQ登录