vue開發小技巧 持續更新

2021-10-23 15:16:38 字數 1794 閱讀 1606

1. 以前的寫法

import veevalidate from 'vee-validate'; // 表單驗證

import from 'vant';

vue.use(veevalidate);

vue.use(button);

vue.use(lazyload); //懶載入

vue.use(popup);

vue.use(toast);

2. 優化  鏈式引用

import veevalidate from 'vee-validate'; // 表單驗證

import from 'vant';

vue.use(veevalidate).use(button).use(lazyload).use(popup).use(toast);

3. 組成陣列   迴圈引入(這種適用於引入大量的元件時)

import veevalidate from 'vee-validate'; // 表單驗證

import from 'vant';

const vantallcomponent=[veevalidate,button,lazyload,popup,toast];

vantallcomponent.foreach(element => );

require.context('@/components/layout', true, /\.vue/)   該方法是指找到components/layout資料夾下所有已vue格式的檔案

第乙個引數是表示路徑 

第二個引數表示是否查詢子檔案 

第三個引數表示匹配什麼格式的檔案

1.全域性匯入

const requirecomponents = require.context('@/components/layout', true, /\.vue/);

let res_com={};

requirecomponents.keys().foreach(filename => );

console.log(res_com);

2.區域性匯入

const path = require('path');

const files = require.context('@/components/containers/home/bannernotice', false, /\.vue$/);

const modules = {};

files.keys().foreach(key => );

console.log(modules);

引入components:modules

雖然空類不影響**執行  但是不符合html語意   能避免還是可以避免

當isactive=true時,渲染結果

當isactive=false時,渲染結果 空的class

解決辦法

1/

2/3/物件方法

4/這種寫法 如果不想給有active類 isactive設定為null或者undefined 如果是false也會出現空類的情況

Linux小技巧(持續更新)

1.最近在遠端伺服器的時候,輸入命令一些報錯資訊老是亂碼。解決辦法 因為服務的命令列預設是不支援英文的,我們需要修改語言才能正確選擇。輸入 echo lang 結果 zh cn.utf 8 修改語言為英語 lang en us 這樣這次登入資訊就是英文了,如果下次在登入,語言還是會顯示中文的。2.有...

css小技巧 (持續更新)

這兩天做專案 遇到的一些css問題記錄一下 以前的解決辦法都是用calc 100 padding或者margin 的數值 但是css3出了個新屬性 box sizing border box margin不在屬性範圍內 意思為 元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設...

Vue 開發學習 持續更新

import user from components users 註冊vue.components users users 類似這樣 元件引入 import toasttitle from components toasttitle index import vue from vue 註冊全域性元...