碼上歡樂
相關內容    簡體    繁體

前端MVC Vue2學習總結（八）——Vue Router路由、Vuex狀態管理、Element-UI

本文轉載自   查看原文   2018-01-11 15:37   906    vue2

一、Vue Router路由

 

二、Vuex狀態管理

 

三、Element-UI

Element-UI是餓了么前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是 Mint UI 。

Element UI 是一套采用 Vue 2.0 作為基礎框架實現的組件庫，它面向企業級的后台應用，能夠幫助你快速地搭建網站，極大地減少研發的人力與時間成本。

Element，一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫

官網：http://element.eleme.io/#/zh-CN（含幫助文檔）

GitHub：https://github.com/ElemeFE/element

3.1、特點

一致性 Consistency
與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；
在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。

反饋 Feedback
控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；
頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。

效率 Efficiency
簡化流程：設計簡潔直觀的操作流程；
清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。

可控 Controllability
用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。

3.2、 安裝

3.2.1、npm安裝

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

npm i element-ui -S

3.2.2、CDN

目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

我們建議使用 CDN 引入 Element 的用戶在鏈接地址上鎖定版本，以免將來 Element 升級時受到非兼容性更新的影響。鎖定版本的方法請查看 unpkg.com。

3.2.3、Hello world

通過 CDN 的方式我們可以很容易地使用 Element 寫出一個 Hello world 頁面。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 引入樣式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>

    <body>
        <div id="app">
            <el-button @click="visible = true">按鈕</el-button>
            <el-dialog :visible.sync="visible" title="Hello world">
                <p>歡迎使用 Element</p>
            </el-dialog>
        </div>
    </body>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    visible: false
                }
            }
        })
    </script>

</html>

運行結果：

 

 在線測試：https://jsfiddle.net/hzfpyvg6/14/

3.3、快速上手

本節將介紹如何在項目中使用 Element。

3.3.1、使用 Starter Kit

我們提供了通用的項目模板，你可以直接使用。對於 Laravel 用戶，我們也准備了相應的模板，同樣可以直接下載使用。

如果不希望使用我們提供的模板，請繼續閱讀。

3.3.2、使用 vue-cli

我們還可以使用 vue-cli 初始化項目，命令如下：

> npm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack
> npm i && npm i element-ui

3.3.3、引入 Element

你可以引入整個 Element，或是根據需要僅引入部分組件。我們先介紹如何引入完整的 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)
})

以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨引入。

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后，將 .babelrc 修改為：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

接下來，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫入以下內容：

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

完整組件列表和引入方式（完整組件列表以 components.json 為准）

import Vue from 'vue'
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui'

Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Autocomplete)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(DatePicker)
Vue.use(TimeSelect)
Vue.use(TimePicker)
Vue.use(Popover)
Vue.use(Tooltip)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Tag)
Vue.use(Tree)
Vue.use(Alert)
Vue.use(Slider)
Vue.use(Icon)
Vue.use(Row)
Vue.use(Col)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Badge)
Vue.use(Card)
Vue.use(Rate)
Vue.use(Steps)
Vue.use(Step)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Cascader)
Vue.use(ColorPicker)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Footer)

Vue.use(Loading.directive)

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
View Code

3.3.4、全局配置

在引入 Element 時，可以傳入一個全局配置對象。該對象目前僅支持 size 字段，用於改變組件的默認尺寸。按照引入 Element 的方式，具體操作如下：

完整引入 Element：

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, { size: 'small' })

按需引入 Element：

import Vue from 'vue'
import { Button } from 'element-ui'

Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button)

按照以上設置，項目中所有擁有 size 屬性的組件的默認尺寸均為 'small'。

3.3.5、開始使用

至此，一個基於 Vue 和 Element 的開發環境已經搭建完畢，現在就可以編寫代碼了。啟動開發模式：

# 執行如下命令后訪問 localhost:8086
npm run dev

編譯：

npm run build

各個組件的使用方法請參閱它們各自的文檔。

3.3.6、示例

修改app.vue組件：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <el-button @click.native="startHacking">Let's do it</el-button>
    <div class="block">
    <span class="demonstration">顯示默認顏色</span>
    <span class="wrapper">
    <el-button type="success">成功按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 顯示顏色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按鈕</el-button>
    <el-button :plain="true" type="warning">警告按鈕</el-button>
    <el-button :plain="true" type="danger">危險按鈕</el-button>
    <el-button :plain="true" type="info">信息按鈕</el-button>
    </span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Use Vue 2.0 Today!'
    }
  },
  methods: {
    startHacking () {
      this.$notify({
        title: 'It Works',
        message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
        duration: 6000
      })
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

main.js如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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: '<App/>',
  components: { App }
})

 運行：

如果出現亂碼則修改app.vue為utf-8的編碼格式

四、Vue2常用資源

4.1、Mint UI（vue2移動端）

項目主頁:http://mint-ui.github.io/#!/zh-cn
demo:http://elemefe.github.io/mint-ui/#/
github地址:https://github.com/ElemeFE/mint-ui
中文文檔地址:http://mint-ui.github.io/docs/#!/zh-cn

4.2、iview

iView 配套的工作流:https://github.com/icarusion/vue-vueRouter-webpack
github地址:https://github.com/iview/iview
官網:https://www.iviewui.com/

4.3、vue-mui

官網:http://mui.yaobieting.com/
github地址:https://github.com/creatshare/vue-mui

4.4、radon-ui

中文文檔：https://luojilab.github.io/radon-ui/#!/
github:https://github.com/luojilab/radon-ui

4.5、antd vue

中文文檔:http://okoala.github.io/vue-antd/#!/components
github:https://github.com/okoala/vue-antd

4.6、weex

社區:http://www.weex.help/
官網:http://weex-project.io/cn/
github:https://github.com/alibaba/weex
中文文檔:http://www.weex.help/topic/57792770eb60516a48db5485

4.7、element(餓了么后台)

官網:http://element.eleme.io/#/zh-CN
餓了么github:http://github.com/elemefe

4.8、N3

官網:https://n3-components.github.io/N3-components/
中文文檔:https://n3-components.github.io/N3-components/component.html
英文文檔:https://github.com/N3-components/N3-components

4.9、vuikit

github:https://github.com/vuikit/vuikit
英文文檔:https://vuikit.js.org/#/


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端MVC Vue2學習總結（九）——Vuex狀態管理插件 前端MVC Vue2學習總結（八）——前端路由 vue2 使用 element-ui 前端MVC Vue2學習總結（一）——MVC與vue2概要、模板、數據綁定與綜合示例 前端MVC Vue2學習總結（五）——表單輸入綁定、組件 用vue2.0+vuex+vue-router+element-ui+mockjs實現后台管理系統的實踐探索 vue路由，ajax，element-ui vue element-UI純前端分頁 vue基於element-ui 的后台管理框架（一） 使用vscode + webpack + vue2 + element-ui搭建vue2腳手腳
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM