Vue—項目搭建紀錄

Vue/Cli 建立項目

$ vue create myApp
$ cd app
$ npm run serve

配置 Vue Router

首先須要對項目的頁面結構有個大體規劃。以個人項目爲例

- '/money': money頁面（默認進入money頁面）
- '/labels': labels頁面
- '/statistics': statistics頁面
-  404頁面

進入router文件夾的index.ts文件下修改路由配置，並在views文件夾內建立對應的.vue組件

const routes = [{
    //訪問根目錄 直接重定向到money頁面
    path: '/',
    redirect:'money'
  },{
    path: '/money',
    component: Money
  },{
    path: '/labels',
    component: Labels
  },{
    path: '/statistics',
    component: Statistics
  },{
    path: '*',
    component: NotFound
}]

在App.vue的template模板內寫入<router-view/>標籤，這樣Vue Router就會根據訪問路徑不一樣去切換顯示頁面了。

項目思路、踩坑記錄

導航欄製做

1. 底部導航欄<Nav/>組件的引入形式

   • 放在App.vue裏 404頁面不須要導航

   • 分別放在每一個頁面中
     1) 全局引入

     //App.vue
     import Nav from "@/components/Nav.vue"
     Vue.component('Nav',Nav)

     2) 局部引入 代碼冗餘

   • 結論：全局引入，局部使用。

2. [踩坑]底部導航欄的佈局方式

   • fixed佈局：移動端坑太多（搜索引擎得知

   • flex佈局：推薦。
     實現方式：

     .container{ 
       display:flex; 
       flex-direction:column;
       height: 100vh;
     }
     .content{
       flex-grow：1; //實現內容的鋪滿
       overflow: auto;
     }

3. 組件化開發
   重複的東西提取出來
   不重複的東西經過props和<slot>插槽搞定
   從第一個項目開始，拒絕重複！

4. [踩坑] 使用 svg-sprite-loader 引入 icon
   1) 沒法在 TypeScript 中引入 SVG 文件
   學自 StackOverflow 點擊查看

   //shims-vue.d.ts
   declare module "*.svg" {
     const content: string;
     export default content;
   }

   2) 配置 SVG sprite loader

5. [踩坑] 如何引入整個 icons 文件夾裏的 .svg文件（一樣適用於其餘後綴）

   let importAll = (requireContext:__WebpackModuleApi.RequireContext) 
                       => requireContext.keys().forEach(requireContext);
   importAll(require.context("../assets/icons", true, /\.svg$/));

6. 路由激活 active-class

   <router-link to="/labels" active-class="selected">
   ...

   選中激活時，加上selected類

7. [踩坑] 解決 <svg> 自帶fill屬性，致使沒法變色的狀況
   使用svgo-loader

Money.vue頁面

1. CSS的規劃

   • reset：padding,margin,box-sizing ...
   • 全局樣式：寫在App.vue中

   • 變量：多處用到的樣式，能夠新建一個scss文件，以變量形式保存，用到的地方直接引入。例如:

     //style.scss
     $color-active: red
     //cpn.vue
     .active{
      color:$color-active;
     }

   • 局部樣式： <style scoped>...</style>
2. HTML優化
   HTML行數過多則拆成組件，下降耦合度、減少debug難度。

3. TS實現

   • 模塊化
   • JS邏輯+Type

   1. 第一個TS組件

      • 引入Component裝飾器
        import { Component } from "vue-property-decorator";

      • 使用Component裝飾器

        @Component
        export default class Type extends Vue {
          number = 0;    //被裝飾器放在data裏
          add(n: Number) {     //被裝飾器放在methods裏
            this.number += n;
          }
        }

---

未完待續