フロントエンドvueフレームワークプロジェクト実戦経験


プロジェクト実戦経験(vueフレームワークに基づく)
この文章を書くのは主にネット上で先端知識に関する基礎的な分類文章がたくさんあるからですが、実際にプロジェクト開発で使用するときは避けられない穴を踏むことができます.私は自分が踏んだ穴を分かち合い、穴を繰り返さないようにしたいだけです.
APPセクション
ピットポイント
  • divバックグラウンドピクチャ属性がローカルファイルパスを引くとstaticディレクトリの下
  • にパスが置換される.
    解決策require(')相対パスインデックスファイルの使用
    • vux框架 的range组件v-model绑定赋值的时候,会初始化赋值NaN。

    ngnix踩坑记

    • 服务闪退启动不了

    建议去log日志文件下err文件查看报错原因
    conf文件被记事本编辑过,保存成了含BOM头的文件
    使用其他编辑器将文件另存为UTF-8不含Bom头的格式
    注:记事本编辑UTF-8都会加BOM头

    下载一个Nodepad++ 编辑器,将文件格式转换为UTF-8格式,去除BOM头

    小技巧

    • 过滤文件后缀名,将.xxxxx一连串后缀名一起替换为空字符串
    filename.replace(/ \. [^\.]+ /g,  '');
    
  • cssにおけるflexレイアウトの場合、水平方向の最後の要素が底部に近づくことを実現し、垂直方向のalign-slef:flex-end効果
  • に類似する.
    .g-flex-right{
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
    
  • scopeモードでUIフレームワークのサブコンポーネントcssスタイルを修正する解決方法
  • 深度作用セレクタ/deep/
    /deep/.child-component-class{
    	width:100vw;
    	...
    }
    
  • delete指定オブジェクトキー値ペア
  • を削除する.
    深度作用セレクタ/deep/
    person = {age: 20,name: wilson}
    delete person.age // person = {name: wilson}
    
  • webpackコンパイルの場合、dllにより構築速度が速くなります.

  • 原理はdllによってまず共通依存パケットのダウンロードを抽出し、共通依存パケットの重複ダウンロードを避けることである.(個人的な理解)
  • npm run dev動的構築時メモリオーバーフローソリューション:node_を開くmodules > .bin > webpack-dev-service.cmdファイル、追加–max_old_space_size=4096コード拡張最大メモリ占有領域.ファイル元コード
  • @IF EXIST "%~dp0
    ode.exe" ( "%~dp0
    ode.exe" "%~dp0\..\[email protected]@webpack-dev-server\bin\webpack-dev-server.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node "%~dp0\..\[email protected]@webpack-dev-server\bin\webpack-dev-server.js" %* )
    @IF EXIST "%~dp0
    ode.exe" ( "%~dp0
    ode.exe --max_old_space_size=4096" "%~dp0\..\[email protected]@webpack-dev-server\bin\webpack-dev-server.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node --max_old_space_size=4096 "%~dp0\..\[email protected]@webpack-dev-server\bin\webpack-dev-server.js" %* )

    未完待続...