Vue—プロジェクト構築記録

3358 ワード
vue.js 先端 javascript typescript
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テンプレートにラベルを書き込むと、Vue Routerはアクセスパスによって表示ページを切り替えます.
プロジェクト構想、踏み込み記録
ナビゲーションバーの作成
  • 下部ナビゲーションバーコンポーネントの導入形態
  • はAppに置かれている.vueの404ページにはナビゲーション
    • は必要ありません
  • は各ページにそれぞれ配置する1)グローバル導入
    //App.vue
import Nav from "@/components/Nav.vue"
Vue.component('Nav',Nav)
    )ローカル導入コード冗長
    • .
  • 結論:グローバル導入、ローカル使用.

  • [踏み込み]下部ナビゲーションバーのレイアウト
  • fixedレイアウト:移動端ピットが多すぎる(検索エンジンは
    • を知っている)
  • flexレイアウト:推奨.実装方法:
    .container{ 
  display:flex; 
  flex-direction:column;
  height: 100vh;
}
.content{
  flex-grow：1; //       
  overflow: auto;
}
  • コンポーネント化開発重複したもの抽出重複しないものpropsとスロットで解決最初のプロジェクトから、重複を拒否!
  • [ピットを踏む]svg-sprite-loaderを使用してicon 1を導入)TypeScriptにSVGファイル学を導入できないStackOverflowクリックして表示 
      //shims-vue.d.ts
declare module "*.svg" {
  const content: string;
  export default content;
}
    )構成SVG sprite loader
    • .
  • [ピットを踏む]iconsフォルダ全体にどのように導入するか.svgファイル(他の接尾辞にも適用)
    let importAll = (requireContext:__WebpackModuleApi.RequireContext) 
                    => requireContext.keys().forEach(requireContext);
importAll(require.context("../assets/icons", true, /\.svg$/));
  • ルーティングアクティブactive-class 
    
...
    選択アクティブ時にselectedクラス
    • を加える.
  • [ピットを踏む]fill属性を持つことを解決し、変色できない場合はsvgo-loader
    • を使用する.
    Money.vueページ
  • CSSの計画
  • reset: padding,margin,box-sizing ...
  • グローバルスタイル:Appに書きます.vue中
  • 変数:複数の場所で使用されるスタイルで、scssファイルを新規作成し、変数形式で保存し、使用する場所を直接導入できます.例:
    //style.scss
$color-active: red
//cpn.vue
.active{
 color:$color-active;
}
  • ローカルスタイル:
  • HTML最適化HTML行数が多すぎるとコンポーネントに分解され、結合度を低減し、debugの難易度を低減する.
  • TS実装
  • モジュール化
  • JSロジック+Type
  • 最初の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;
  }
}
    • を使用


    未完待機
    Vueは多重化可能なマルチキャストコンポーネントを実現する
    vue cli 3プロジェクトマルチ環境パッケージ構成