摘要:最近看了一下項目,它是基于創(chuàng)建的項目創(chuàng)建項目安裝默認(rèn)手動選擇配置,看個人項目需求支持使用書寫源碼支持。支持代碼風(fēng)格檢查和格式化。權(quán)限驗證那里也做了遞歸的處理不顯示在菜單欄。組件內(nèi)的在組件內(nèi)使用可以拿到
最近看了一下vue-element-admin項目,它是基于vue-cli3創(chuàng)建的項目
創(chuàng)建vue-cli3項目安裝vue-cli npm install -g @vue/cli vue create project
default: 默認(rèn)
Manually select features 手動(Manually)
選擇配置,看個人項目需求
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。
根據(jù)項目的選擇配置 選擇router 是否為hash 還是history css-processor 預(yù)編譯環(huán)境配置 eslint一些配置
npm run serve 運行項目
項目根目錄下手動新建一個 vue.config.js,一些基礎(chǔ)的配置 可參考鏈接描述
vue-element-admin 代碼我們在項目中可以通過process.env.NODE_ENV 可以分辨是開發(fā)環(huán)境(development) 生產(chǎn)環(huán)境(production) 無需設(shè)置 npm run serve npm run build 會自動匹配環(huán)境
在根目錄下
新建 .env.development 這個文件設(shè)置開發(fā)環(huán)境變量名 新建.env.production 這個文件可以設(shè)置生產(chǎn)環(huán)境變量名 通過process.env.變量名 拿到這兩個文件的變量名
main.js
項目的入口 攔截路由的功能 檢測用戶是否登錄,用戶沒有登錄跳轉(zhuǎn)到登錄頁面 // 白名單 無需登錄的頁面 const whiteList = ["/login"] router.beforeEach((to, from, next) => { if(!utils.storage.get("m_userInfo")) { if (whiteList.indexOf(to.path) !== -1) { next() } else { next(`/login?redirect=${to.path}`) } } else { next() } })
網(wǎng)絡(luò)請求 request.js
封裝axios ``` const ajax = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, //在.env.development .env.production 獲取base_url timeout: 10000 }) // 設(shè)置請求攔截器 ajax.interceptors.request.use(config => { let m_userInfo: any = storage.get("m_userInfo") if (m_userInfo) { config.headers["access-token"] = m_userInfo.token } return config }, error => { return Promise.reject(error) }) // 返回攔截器 ajax.interceptors.response.use( response => { const {code, message, data} = response.data || { code: "", message: "", data: {} } if(code != 1) { // code 不為1的情況 彈框提示 Message({ message: message || "Error", type: "error", duration: 5 * 1000 }) return Promise.reject(message) } else { return data } }, error => { return Promise.reject(error) } ) ```
Layout 組件 (所有路由的組件都是layout)
菜單欄 根據(jù) router.js 配置的路由并且根據(jù)權(quán)限動態(tài)生成的,同時使用了遞歸組件,不管你路由多少級嵌套。權(quán)限驗證那里也做了遞歸的處理(hidden: true 不顯示在菜單欄)。 頁面 :通過通過this.$router.path 獲取路由顯示主頁面
route.js
// 異步加載路由 在meta字段設(shè): 設(shè)置該頁面的訪問權(quán)限 export const asyncRouterMap = [{ path: "/permission", component: Layout, name: "測試權(quán)限", meta: { role: ["admin","editor"] }, //頁面需要的權(quán)限 children: [ { path: "index", component:Test, name: "權(quán)限測試頁", meta: { role: ["admin","editor"] } //頁面需要的權(quán)限 }]}]
vuex
module:可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰,方便管理。 export default new Vuex.Store({ modules: { // 組件內(nèi)的 store } }) 在組件內(nèi) 使用 computed:{ ...mapGetters([ ]) }可以拿到 state
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/106201.html
pure_admin Project description this is a pure_admin copy from vue-element-admin hahaha! Project url See pure_admin Project setup npm install Compiles and hot-reloads for development npm run serve Comp...
摘要:目前的技術(shù)棧主要的采用由于是個人項目,所以數(shù)據(jù)請求都是用了代替。后續(xù)會出一系列的教程配套文章,如如何從零構(gòu)建后臺項目框架,如何做完整的用戶系統(tǒng)如權(quán)限驗證,二次登錄等,如何二次開發(fā)組件如富文本,如何整合七牛等等文章,各種后臺開發(fā)經(jīng)驗等等。 完整項目地址:vue-element-admin系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二...
摘要:我們將登錄按鈕上綁上事件,點擊登錄之后向服務(wù)端提交賬號和密碼進(jìn)行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄,不過在前 完整項目地址:vue-element-admin 系列文章: 手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇) 手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇) 手摸手,帶你用vue擼后臺 系列三 (實戰(zhàn)篇) 手摸手,帶你用vu...
權(quán)限 路由權(quán)限 靜態(tài)路由:固定的路由,沒有權(quán)限。如login頁面 動態(tài)路由:根據(jù)不同的角色,后端返回不同的路由接口。通過meta中的roles去做篩選 store存儲路由 3 //地址:store/modules/permission import{routesasconstantRoutes}from'@/router' //根據(jù)meta.roles去...
摘要:靈活性和針對性。所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。動手開干接下來我們一起手摸手教改造包裝一個插件,只要幾分鐘就可以封裝一個專屬于你的。 項目地址:vue-countTo配套完整后臺demo地址:vue-element-admin系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶...
閱讀 854·2021-11-19 11:29
閱讀 3349·2021-09-26 10:15
閱讀 2854·2021-09-22 10:02
閱讀 2433·2021-09-02 15:15
閱讀 1970·2019-08-30 15:56
閱讀 2407·2019-08-30 15:54
閱讀 2903·2019-08-29 16:59
閱讀 635·2019-08-29 16:20