1.「全域性元件註冊」
原:
新:
建立全域性.js檔案管理全域性元件 globalcomponent.js
// 1 - globalcomponent.js
import vue from 'vue' // 引入vue
// 處理首字母大寫 abc => abc
function changestr(str)
/* require.context(arg1,arg2,arg3)
arg1 - 讀取檔案的路徑
arg2 - 是否遍歷檔案的子目錄
arg3 - 匹配檔案的正則
關於這個api的用法,建議小夥伴們去查閱一下,用途也比較廣泛
*/const requirecomponent = require.context('.', false, /\.vue$/)
console.log('requirecomponent.keys():',requirecomponent.keys()) // 列印
requirecomponent.keys().foreach(filename => )
// 2 - 將globalcomponent.js引入main.js
import global from './components/globalcomponent'
// 3 - 使用這類元件不再需要引入和註冊,直接標籤使用即可
2.extra:路由分割槽以及動態新增路由
建立專門的路由.js檔案管理所有的路由
總路由管理檔案 - index.js
分割槽路由
- index.routes.js
- login.routes.js
在大型專案中,往往會有很多互不關聯的模組,例如電商平台中的**,個人資訊,這種情況下就可以對路由進行分割槽
// 分割槽路由檔案寫法
export default
// 總路由管理檔案 index.js 寫法
import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
const routerlist = // 路由陣列 - 存放所有路由
function importall(routerarr))
}importall(require.context('.',true,/\.routes\.js/))
const routes = [
...routerlist
]const router = new vuerouter()
export default router
3.拯救繁亂的template
template存在一定的缺陷,例如:
處理多個button
原: button1
button2
button3
新:
// 建立乙個button.vue檔案 寫法如下// 引入
4.「高精度全域性許可權處理」
處理某按鈕顯示許可權問題
/* 在專案裡新建乙個common資料夾用於存放全域性 .js 檔案
這種全域性資料夾做法相當普遍,一般專案裡都應該有這樣乙個資料夾來管理全域性的東西
*/// common/jurisdiction.js 用於存放與許可權相關的全域性函式/變數
export function checkjurisdiction(key) else
}// 將全域性許可權js掛載到全域性中
// main.js
import from './common/jurisdiction'
// 優雅操作 - vue自定義指令
vue.directive('permission',
}else
}})// 使用方式
許可權1許可權2
// 無需再通過value去判斷,直接通過v-permission的值進行判斷即可
vue使用技巧
透傳透傳props props child component 透傳attrs attrs child component 透傳object obj child component 透傳事件 listeners child component 動態指令 動態繫結 someprop something...
Vue元件使用技巧 is屬性
首先,提起vue的元件,大家都不會陌生,使用起來就像使用普通標籤一樣簡單,功能也可以隨意定製,真的是很方便.但是基於html語法,一些特定的標籤,比如,等.在標籤下,只有標籤是有效的,同理表現下只有有效,那麼如果我們想加入自定義的元件該怎麼辦呢.這種方法顯然是不太適合的 my component u...
vue 使用技巧總結 19 01
上面的函式中使用箭頭,會導致 this 捕獲不到 vue 例項。各位道友切記切記.目前通常使用的方式是 然後在查資料的時候翻到了乙個統一管理的方式 asynccomponent.js 檔案 export const component01 import views export const comp...