Vue項目 - Vue2.5 + webpack開發去哪兒Demo

項目地址:https://github.com/gaoruishan/TravelDemo.git

項目筆記

1,目錄結構

├── build             # webpack/node 配置項
├── config            # 測試、開發、上線的環境配置
├── node_modules      # node依賴包
├── src               # 源代碼目錄
│  ├── api            # 請求後端和模擬數據的 API
│  ├── assets         # webpack 打包的靜態資源文件
│  ├── components     # 所有組件
│  ├── mock           # 模擬數據
│  ├── router         # 路由
│  ├── service        # 服務
│  ├── store          # vuex 狀態管理
│  │  ├── modules     #
│  │  └── index.js    #
│  ├── styles         # 樣式
│  ├── utils          # 全局工具類，directive, mixin 還有綁定到 Vue.prototype 的函數
│  ├── views          # 業務頁面
│  ├── App.vue        # 根組件
│  └── main.js        # vue 入口文件
└── static            # npm沒有的第三方庫

2,根目錄配置文件

.babelrc
- babel的配置文件, babel 的作用是將 ES6 轉換成 ES5

.editorconfig
- 項目編碼、縮進、尾行插入換行符、過濾尾部空格

.eslintignore
- 過濾不需要eslint校驗的文件類型和目錄

.eslintrc.js
- eslint配置文件一個用來識別ECMAScript 並且按照規則給出報告的代碼檢測工具

.postcssrc.js
- 支持通過 postcss-loader 自動加載同一個配置文件,處理的普通CSS文件和 *.vue 文件中的 CSS 之間共享相同的配置

.index.html
- 應用運行的html文件

.package.json
- 關鍵文件: 項目信息、依賴關係和插件配置
 {
 //從name到private都是package的配置信息，也就是我們在腳手架搭建中輸入的項目描述
   "name": "shop",//項目名稱：不能以.(點)或者_（下劃線）開頭，不能包含大寫字母，具有明確的的含義與現有項目名字不重複
   "version": "1.0.0",//項目版本號：遵循“大版本.次要版本.小版本”
   "description": "A Vue.js project",//項目描述
   "author": "qietuniu",//作者名字
   "private": true,//是否私有
   //scripts中的子項即是我們在控制檯運行的腳本的縮寫
   "scripts": {
    //①webpack-dev-server:啓動了http服務器，實現實時編譯;
    //inline模式會在webpack.config.js入口配置中新增webpack-dev-server/client?http://localhost:8080/的入口,使得我們訪問路徑爲localhost:8080/index.html（相應的還有另外一種模式Iframe）;
    //progress:顯示打包的進度
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",//與npm run dev相同，直接運行開發環境
     "build": "node build/build.js"//使用node運行build文件
   },
   //②dependencies(項目依賴庫):在安裝時使用--save則寫入到dependencies
   "dependencies": {
     "vue": "^2.5.2",//vue.js
     "vue-router": "^3.0.1"//vue的路由插件
   },
   //和devDependencies（開發依賴庫）：在安裝時使用--save-dev將寫入到devDependencies
   "devDependencies": {
     "autoprefixer": "^7.1.2",//autoprefixer作爲postcss插件用來解析CSS補充前綴，例如 display: flex會補充爲display:-webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex。
     //babel:以下幾個babel開頭的都是針對es6解析的插件。用最新標準編寫的 JavaScript 代碼向下編譯成可以在今天隨處可用的版本
     "babel-core": "^6.22.1",//babel的核心，把 js 代碼分析成 ast ，方便各個插件分析語法進行相應的處理。
     "babel-helper-vue-jsx-merge-props": "^2.0.3",//預製babel-template函數，提供給vue,jsx等使用
     "babel-loader": "^7.1.1",//使項目運行使用Babel和webpack來傳輸js文件，使用babel-core提供的api進行轉譯
     "babel-plugin-syntax-jsx": "^6.18.0",//支持jsx
     "babel-plugin-transform-runtime": "^6.22.0",//避免編譯輸出中的重複，直接編譯到build環境中
     "babel-plugin-transform-vue-jsx": "^3.5.0",//babel轉譯過程中使用到的插件，避免重複
     "babel-preset-env": "^1.3.2",//轉爲es5，transform階段使用到的插件之一
     "babel-preset-stage-2": "^6.22.0",//ECMAScript第二階段的規範
     "chalk": "^2.0.1",//用來在命令行輸出不同顏色文字
     "copy-webpack-plugin": "^4.0.1",//拷貝資源和文件
     "css-loader": "^0.28.0",//webpack先用css-loader加載器去解析後綴爲css的文件，再使用style-loader生成一個內容爲最終解析完的css代碼的style標籤，放到head標籤裏
     "extract-text-webpack-plugin": "^3.0.0",//將一個以上的包裏面的文本提取到單獨文件中
     "file-loader": "^1.1.4",//③打包壓縮文件，與url-loader用法類似
     "friendly-errors-webpack-plugin": "^1.6.1",//識別某些類別的WebPACK錯誤和清理，聚合和優先排序，以提供更好的開發經驗
     "html-webpack-plugin": "^2.30.1",//簡化了HTML文件的創建，引入了外部資源，創建html的入口文件，可通過此項進行多頁面的配置
     "node-notifier": "^5.1.2",//支持使用node發送跨平臺的本地通知
     "optimize-css-assets-webpack-plugin": "^3.2.0",//壓縮提取出的css，並解決ExtractTextPlugin分離出的js重複問題(多個文件引入同一css文件)
     "ora": "^1.2.0",//加載（loading）的插件
     "portfinder": "^1.0.13",//查看進程端口
     "postcss-import": "^11.0.0",//可以消耗本地文件、節點模塊或web_modules
     "postcss-loader": "^2.0.8",//用來兼容css的插件
     "postcss-url": "^7.2.1",//URL上重新定位、內聯或複製
     "rimraf": "^2.6.0",//節點的UNIX命令RM—RF,強制刪除文件或者目錄的命令
     "semver": "^5.3.0",//用來對特定的版本號做判斷的
     "shelljs": "^0.7.6",//使用它來消除shell腳本在UNIX上的依賴性，同時仍然保留其熟悉和強大的命令，即可執行Unix系統命令
     "uglifyjs-webpack-plugin": "^1.1.1",//壓縮js文件
     "url-loader": "^0.5.8",//壓縮文件，可將圖片轉化爲base64
     "vue-loader": "^13.3.0",//VUE單文件組件的WebPACK加載器
     "vue-style-loader": "^3.0.1",//類似於樣式加載程序，您可以在CSS加載器之後將其鏈接，以將CSS動態地注入到文檔中作爲樣式標籤
     "vue-template-compiler": "^2.5.2",//這個包可以用來預編譯VUE模板到渲染函數，以避免運行時編譯開銷和CSP限制
     "webpack": "^3.6.0",//打包工具
     "webpack-bundle-analyzer": "^2.9.0",//可視化webpack輸出文件的大小
     "webpack-dev-server": "^2.9.1",//提供一個提供實時重載的開發服務器
     "webpack-merge": "^4.1.0"//它將數組和合並對象創建一個新對象。如果遇到函數，它將執行它們，通過算法運行結果，然後再次將返回的值封裝在函數中
   },
   //engines是引擎，指定node和npm版本
   "engines": {
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
   //限制了瀏覽器或者客戶端需要什麼版本纔可運行
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ]
 }

常用知識點

1.對項目目錄和配置使用說明
https://blog.csdn.net/u011684839/article/details/80221844

2,①根目錄index.html 是唯一入口頁面, webpack構建的文件js或CSS自動加入
  ②src目錄main.js是唯一入口函數,其中<div id="app"></div> ,使用new Vue創建唯一Vue對象並填充到指定id="app"中
  ③src下的router目錄index.js是唯一的路由配置, 對應main.js中引入路由和app.vue核心組件


3,①stylus中文網:https://stylus.bootcss.com/
  ②手動生成css: stylus --compress < test.styl > test.css
  ③在線css轉less/sass/stylus工具 css編輯器: http://tools.jb51.net/code/css2less
  ④Stylus基本使用: https://www.jianshu.com/p/5fb15984f22d

4,WebStorm（2018版）-----eslint的配置和使用: https://blog.csdn.net/qq_29329037/article/details/80100450

5,輪播圖地址:https://github.com/surmon-china/vue-awesome-swiper
  安裝2.6.7版本:npm install [email protected] --save

6,使用 Mint UI庫: http://mint-ui.github.io/docs/#/zh-cn2

7, !important 語法,提升指定樣式條目的應用優先權

8,對比computed和watch
// computed定義方法,模板中可以直接使用'變量',不加() -->每8個分一組
  computed: {
    countPages () {
      const pages = []
      this.iconList.forEach((item, i) => {
        // 每8個一組
        const index = Math.floor(i / 8)
        // 是否包含下標
        if (!pages[index]) {
          pages[index] = []
        }
        pages[index].push(item)
      })
      return pages
    },
    showIcons () {
      return this.iconList.length
    }
  }
// watch是對data中的keyword監聽變化,模板中可以直接使用'變量'
watch: {
  keyword () {
    // 傳個父類
    this.$emit('searchKeyWord', this.keyword)
    if (!this.keyword) {
      return
    }
  }
}
9,定義一個mixins.styl混入樣式,在組件中導入@import "~@styles/mixins.styl",直接調用 ellipse()
  ellipse()
     overflow hidden
     white-space nowrap
     text-overflow ellipsis

10, 在package.json中配置 --host 0.0.0.0   可在局域網ip通手機連接測試

11, 打包npm run build命令 會執行build/build.js 生成一個dist目錄
    設置assetsPublicPath: '/travel' 文件存放服務器位置路徑

12,rem和em區別
  em:是長度單位,參照當前元素的字號font-size大小; 沒有設置,參照瀏覽器默認設置
  rem:是css3中的長度單位,參照根元素(html)的字號

13,UI設計圖以iPhone6的750px的2倍圖,實際上375pt點--> 1rem 對應在rest.css的html中font-size=50px
   例如: 在@1x基準圖中 43px --> 1rem==>50px,  43/50=0.86rem 即在@2x圖中 對應86px

14,在webpack.base.confi.js中配置,在vue中使用 @import "~@styles/varibles.styl"
    // 自動的擴展後綴，比如一個js文件，則引用時書寫可不要寫.js
    extensions: ['.js', '.vue', '.json'],
    // 創建路徑的別名，比如增加'components': resolve('src/components')等
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 自定義別名
      '@styles':resolve('src/assets/styles')
     }
區別: /* 別名導入 */
     @import "~@styles/varibles.styl"
     /* 相對路徑導入 */
     @import "../../../assets/styles/varibles.styl"

15,// 調用push返回指定路徑
   this.$router.push('/')
   // 將router-link默認的a標籤給爲div, 用單引號拼接參數
   <router-link tag="div" :to="'/detail/'+item.id" />
   對應的router中添加: path: '/detail/:id',

16,flex 屬性值可以包含三個參數：flex-grow，flex-shrink 和 flex-basis。
   第二個和第三個參數（flex-shrink 和 flex-basis）可選。
    (1)flex-grow屬性: 定義項目的放大比例
    如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間
    如果一個項目的flex-grow屬性爲2，其他項目都爲1
    (2)flex-shrink屬性:定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小
    (3)flex-basis屬性:定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。

17,在css裏面，padding-top,padding-bottom,margin-top,margin-bottom取值爲百分比的時候，參照的是父元素的寬度。
   比如：父元素寬度是100px, 子元素padding-top:50%，那麼padding-top的實際值就是100*50%=50px

18,iconfont網站:https://www.iconfont.cn/
   使用:   <span class="iconfont">&#xe624;</span>

19,<!--判斷是否有數據,調用自己<datail-list />遞歸-->
   <div v-if="item.children" class="item-children">
      <datail-list :categoryList="item.children"></datail-list>
   </div>