本文主要包括以下4個內容

1. 什么是ElementUI

2. Vue 中引入ElementUI

3. Vue+elementUI構建后臺管理系統

4. 開源項目推薦

1.什么是ElementUI

官網：https://element.eleme.cn/#/zh-CN描述：Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫.

2.Vue 中引入elementUI

1)npm 安裝推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2)引入完整的 Element在 main.js 中寫入以下內容：

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({  el: '#app',  render: h => h(App)});

3)導入組件進行測試

下面以Radio 單選框為例

官網地址：https://element.eleme.cn/#/zh-CN/component/radio

  備選項  備選項  export default {    data () {      return {        radio: '1'      };    }  }

4)打開頁面測試

3.Vue+elementUI構建后臺管理系統

參考布局容器

網址：https://element.eleme.cn/#/zh-CN/component/container

查看路由參數做到，點擊左邊頁面內容跟著變化

查看導航菜單文檔

官網：https://element.eleme.cn/#/zh-CN/component/menu

看到參數router?，開啟之后可以通過index?使得右邊頁面進行替換

1)導入代碼到App.vue,將右側

替換為

2)在menu 標簽添加路由配置

3)創建MyTable.vue 文件添加文件

                //這里可以導入其他文件(比如：組件，工具js，第三方插件js，json文件，圖片文件等等)//例如：import 《組件名稱》 from '《組件路徑》';export default {//import引入的組件需要注入到對象中才能使用  components: {},  data() {    //這里存放數據    const item = {        date: '2016-05-02',        name: '王小虎',        address: '上海市普陀區金沙江路 1518 弄'      };      return {        tableData: Array(20).fill(item)      }??},??}

4)在router?文件中index.html?中添加router 配置

import MyTable from '@/components/MyTable'{  path: '/table',  name: 'table',  component: MyTable}

5)在App?.vue 添加導航實現

  分組一  用戶列表  Hello

6)測試頁面一

頁面二

4.開源項目推薦

1. vue-Element-Admin

GitHub?Star 數 58000，?GitHub?地址：

https://github.com/PanJiaChen/vue-element-admin

一個基于 vue2.0 和 Eelement 的控制面板 UI 框架。

2.?vue-manage-system

GitHub?Star 數 10800，?GitHub?地址：

https://github.com/lin-xin/vue-manage-system

基于vue + element的后臺管理系統解決方案

-END-

到此為止，《JAVA全棧面試前端基礎》系列，完結

可以關注我的公眾號，獲取更多學習資料

點擊“在看”，學多少都不會忘~

總結

以上是生活随笔為你收集整理的element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。