天天看點
傳回

餓了麼--vue項目總結

餓了麼--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
  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. }

然後在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])
  17. else {
  18. res.send('no such api name')
  20. })
  22. // 資料所在的位置
  23. apiServer.use('/api', apiRouter);
  24. apiServer.listen(3000, function (err) {
  25. if (err) {
  26. console.log(err)
  27. return
  29. console.log('Listening at http://localhost:' + 3000 + '\n')

之後config/index.js目錄下

  2. dev: {
  3. // Paths
  4. assetsSubDirectory: 'static', //被webpack編譯處理過的資源檔案都會在這個目錄下
  5. assetsPublicPath: '/', //根目錄
  6. proxyTable: {                //解決跨域問題
  7. '/api': 'http://localhost:3000/'
  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', //編譯輸出格式

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"    //根目錄下重定向到首頁面
  8. path:'/goods',        //不同的路由使用不同的元件
  9. component:goods
  12. path:'/ratings',
  13. component:ratings
  14. },{
  15. path:'/seller',
  16. component:seller
  18. ]
  19. const router = new VueRouter({        //将路由導入VueRouter
  20. mode:'history', //可以去掉#
  21. 'linkActiveClass': 'active',
  22. routes
  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>
  11. <router-link to="/ratings">評論</router-link>
  14. <router-link to="/seller">商家</router-link>
  17. <!-- 路由改變時，顯示相應的内容 -->
  18. <keep-alive>
  19. <router-view :seller="seller"></router-view>            //父元件傳遞資料
  20. </keep-alive>
  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項目總結
  1. html:
  2. <div class="title">
  3. <div class="line"></div>
  4. <div class="text">優惠消息</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
項目總結 餓了麼APP vue3.0 css html
上一篇: H5版俄羅斯方塊(1)---需求分析和目标創新
下一篇: java實作拉丁方塊填數字

繼續閱讀