摘要:但是有邊框,不好看啊再次美化使用使用圖標庫安裝這里主要貼一下的改動,其他的代碼就不貼了看下效果圖標什么的都有了。另外文件需要加上看看效果點擊菜單,路徑跳轉(zhuǎn),并且每次都是多帶帶去加載路由的文件。
做完這個demo后,我體會到,Vue組件化,webpack, Vue-router等,并不是很難學(xué)習,你需要的只是拿起斧頭的勇氣在做demo的過程中,我遇到一個問題,就是vue-router懶加載一直實現(xiàn)不了,糾結(jié)了半天。后來回到原點,去vue-route官網(wǎng)看文檔,發(fā)現(xiàn)是因為syntax-dynamic-import插件沒有安裝。
所以說:你以為的bug, 實際上是你沒看透文檔
初次學(xué)習這個教程,你不需要有任何擔憂某些東西不會,你也不需要寫任何代碼。因為基本上所有代碼都是從element官網(wǎng)上拷貝的,你所做的只是把他們組裝在一起罷了。
在線預(yù)覽
倉庫地址:https://github.com/wangduandu...
效果圖:
使用到的技術(shù):
Vue
Vue-router
Element-ui
webpack
Normalize.css
vue-awesome
babel
1 vue-cli 安裝模板? vue-el-dashboard git:(master) vue init webpack
? Generate project in current directory? Yes
? Project name vue-el-dashboard
? Project description A Vue.js project
? Author wangdd
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "vue-el-dashboard".
To get started:
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
2 安裝依賴并運行
? vue-el-dashboard git:(master) ? cnpm i
? Installed 44 packages
? Linked 680 latest versions
? npm run dev
瀏覽器打開如下頁面:
3 安裝初始化頁面布局安裝并使用Element UI
cnpm i element-ui -S
修改 /src/main.js 為:
import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import App from "./App"
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: "#app",
template: "",
components: { App }
})
我需要的布局是這種:
在 Element 上復(fù)制對應(yīng)的代碼,
并粘貼到 /src/App.vue文件中:
不出意外的話,你可以在瀏覽器上看到如下布局:
現(xiàn)在,布局就這么成了。
4 安裝側(cè)邊菜單欄我需要側(cè)邊欄是下圖右邊的自定義顏色的那種菜單
在components文件夾下新建NavMenu.vue
默認顏色
導(dǎo)航一 分組一 選項1 選項2 選項3 選項4 選項1 導(dǎo)航二 導(dǎo)航三 自定義顏色
導(dǎo)航一 分組一 選項1 選項2 選項3 選項4 選項1 導(dǎo)航二 導(dǎo)航三
然后將NavMenu組件導(dǎo)入到App.vue中, 修改App.vue:
Header Main
這里要解釋一下這條語句, 該語句中的@, 符號是什么意思?
import NavMenu from "@/components/NavMenu"
在build/webpack.base.conf.js中有如下代碼, alias就是起別名,@符號就是代表src路徑, 所以@/components/NavMenu就是src/components/NavMenu。 這樣webpack就知道如何引入文件了。這樣做的好處是不必到處去寫src了。
resolve: { extensions: [".js", ".vue", ".json"], alias: { "vue$": "vue/dist/vue.esm.js", "@": resolve("src"), } },
現(xiàn)在打開瀏覽器,應(yīng)該可以看到如下界面:
可以看到菜單已經(jīng)引入進來了,但是是兩個菜單,下面我們需要修改一下,只要右邊的菜單,并刪除一些多余的元素。
修改NavMenu.vue文件。
導(dǎo)航一 選項1 選項2 選項3 選項4 導(dǎo)航二 選項1 選項2 選項3 選項4
現(xiàn)在打開瀏覽器看看:
點擊展開菜單看看:
我們需要的功能:
每次只能展開一個一級菜單
每次點擊一個二級菜單可以自動改變路由,跳轉(zhuǎn)到對應(yīng)的組件
由于菜單在路由中也會使用,所以最好抽象出來,做成一個配置文件
第1點和第二點比較好搞,Element上已經(jīng)有配置文檔:
unique-opened: 是否只保持一個子菜單的展開
router: 是否使用 vue-router 的模式,啟用該模式會在激活導(dǎo)航時以 index 作為 path 進行路由跳轉(zhuǎn)
修改NavMenu.vue
導(dǎo)航一 選項1 選項2 選項3 選項4 導(dǎo)航二 選項1 選項2 選項3 選項4
打開瀏覽器,點擊一個二級菜單看看,你會發(fā)現(xiàn),效果并不像預(yù)期那樣,而且控制臺還向你扔出一個bug:
添加一個暫時的路由: 修改main.js
import Vue from "vue" import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" import App from "./App" import router from "./router" Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: "#app", router, template: "", components: { App } })
打開瀏覽器,點擊一個二級菜單,這時候沒有報錯,瀏覽器的路徑也變了, 變成http://localhost:8080/#/1-3
每次增加一個菜單都要寫點html是不能忍的,能用js的,就別用html。
在src目錄下創(chuàng)建一個config目錄,目錄下創(chuàng)建一個menu-config.js 文件:
外層的數(shù)組代表一級菜單,內(nèi)層sub數(shù)組代表二級菜單。
module.exports = [{ name: "基礎(chǔ)", id: "basic", sub: [{ name: "Layout 布局", componentName: "BasicLayout" }, { name: "Container 布局容器", componentName: "BasicContainer" }] }, { name: "Form", id: "form", sub: [{ name: "Radio 單選框", componentName: "FormRadio" }, { name: "Checkbox 多選框", componentName: "FormCheckbox" }] }]
在NavMenu.vue中引入這個文件,并使用v-for循環(huán)去渲染這個菜單:
這里要說明一下,我給二級菜單加上了over-hide類,二級菜單在展開時,有點溢出父元素了。
打開瀏覽器看看, 這時候菜單已經(jīng)是根據(jù)配置文件渲染的了。
在componets文件夾下創(chuàng)建一個Header.vue, 并在App.vue中引入,
Header.vue
Element
App.vue
Main
這時候打開瀏覽器看看, 是不是已經(jīng)好看一點了。但是body有邊框,不好看啊!
再次美化
使用css reset Normalize.css
使用font-awesome vue-awesome圖標庫
安裝Normalize.css, vue-awesome
cnpm i normalize.css -D cnpm i vue-awesome -D
這里主要貼一下main.js的改動,其他的代碼就不貼了:
import Vue from "vue" import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" import NormailizeCss from "normalize.css" import "vue-awesome/icons" import Icon from "vue-awesome/components/Icon" import App from "./App" import router from "./router" Vue.config.productionTip = false Vue.use(ElementUI) Vue.component("icon", Icon) /* eslint-disable no-new */ new Vue({ el: "#app", router, template: "", components: { App } })
看下效果, 圖標什么的都有了。
在components新增四個文件:
BasicContainer.vue
這是:Container 布局容器
BasicLayout.vue
這是:Layout 布局
FormCheckbox.vue
這是:Checkbox 多選框
FormRadio.vue
這是:Radio 單選框
修改route/index.js文件, 關(guān)于路由和懶加載就不在此贅述,任何文檔都沒有官方文檔說的好。
注意:如果您使用的是 Babel,你將需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正確地解析語法。
也就是說,你要先安裝syntax-dynamic-import, 不然懶加載根本不行。
cnpm install --save-dev babel-plugin-syntax-dynamic-import
import Vue from "vue" import Router from "vue-router" import menus from "@/config/menu-config" Vue.use(Router) var routes = [] menus.forEach((item) => { item.sub.forEach((sub) => { routes.push({ path: `/${sub.componentName}`, name: sub.componentName, component: () => import(`@/components/${sub.componentName}`) }) }) }) export default new Router({ routes })
另外App.vue文件需要加上 router-view
看看效果:點擊菜單,路徑跳轉(zhuǎn),并且每次都是多帶帶去加載路由的文件。
8 github 部署如果你想在github上部署,那么你要修改config/index.js的以下代碼, 不然有些文件因為路徑問題可能會找不到。
build: { // Template for index.html index: path.resolve(__dirname, "../docs/index.html"), // Paths assetsRoot: path.resolve(__dirname, "../docs"), assetsSubDirectory: "static", assetsPublicPath: "/vue-el-dashboard/",
掃碼訂閱我的微信公眾號:洞香春天。每天一篇技術(shù)短文,讓知識不再高冷。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/89798.html
摘要:我們將登錄按鈕上綁上事件,點擊登錄之后向服務(wù)端提交賬號和密碼進行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄,不過在前 完整項目地址:vue-element-admin 系列文章: 手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇) 手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇) 手摸手,帶你用vue擼后臺 系列三 (實戰(zhàn)篇) 手摸手,帶你用vu...
摘要:安裝完成之后,打開命令行工具,然后輸入,輸入和,如下圖,如果出現(xiàn)相應(yīng)的版本號,則說明安裝成功。 先說點什么 剛從坑里爬出來,來和大家分享一下,也許我寫的東西大部分文章都有,但是也有些新的東西,小白仔細看哦,大牛來了也請指點一二,也幫助我進步! 進入正題 Vue 2.0 項目的基本創(chuàng)建 一.Vue 2.0 的環(huán)境搭建 1.node.js安裝 安裝原因:Node.js 是一個服務(wù)器...
摘要:運行環(huán)境是,其它版本的小小伙伴要注意版本兼容的問題喔好了,首頁在創(chuàng)建項目目錄,下面進行項目的第一步,搭建環(huán)境。附上代碼附上代碼路由控制和接下來就配置入口文件,和入口文件的模板了。 1.前言 現(xiàn)在正在開發(fā)一個公司的后臺管理項目,項目是一個單頁面應(yīng)用。功能上就是管理銷售訂單的各個環(huán)節(jié),包括物流管理,回款管理,訂單管理等等的功能。這些就不多說了。項目是,基于webpack3,vue2.2.6...
摘要:其中用來完成請求,將添加的原型上后就不需要再在每個需要使用它的頁面引入了每個頁面都相當于一個組件,文件以結(jié)尾,第一次啟動成功時看到的頁面就是組件,路徑。 學(xué)習筆記...在線地址:cl8023.com github 數(shù)據(jù)庫已改為mongodb 快速搭建 node 后端服務(wù)Github-quick-node-server 準備工作 安裝node,這是必須的 新版node自帶npm...
摘要:前言本文講解如何在項目中使用來搭建并開發(fā)項目,并在此過程中踩過的坑。具有類型系統(tǒng),且是的超集,在年勢頭迅猛,可謂遍地開花。年將會更加普及,能夠熟練掌握,并使用開發(fā)過項目,將更加成為前端開發(fā)者的優(yōu)勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項目中使用 TypeScript...
閱讀 3479·2021-09-08 10:46
閱讀 1189·2019-08-30 13:17
閱讀 2369·2019-08-30 13:05
閱讀 1212·2019-08-29 15:29
閱讀 2889·2019-08-29 11:31
閱讀 543·2019-08-26 12:13
閱讀 1537·2019-08-26 11:42
閱讀 1846·2019-08-23 18:37