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

時間 2019-11-08

標籤前端 mvc vue2 vue 學習總結 router 路由 vuex 狀態管理 element 欄目系統網絡简体版

原文原文鏈接

1、Vue Router路由

2、Vuex狀態管理

3、Element-UI

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

Element UI 是一套採用 Vue 2.0 做爲基礎框架實現的組件庫，它面向企業級的後臺應用，可以幫助你快速地搭建網站，極大地減小研發的人力與時間成本。html

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

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

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

3.一、特色

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

反饋 Feedback
控制反饋：經過界面樣式和交互動效讓用戶能夠清晰的感知本身的操做；
頁面反饋：操做後，經過頁面元素的變化清晰地展示當前狀態。git

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

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

3.二、安裝

3.2.一、npm安裝

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

npm i element-ui -S

3.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.三、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.三、快速上手

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

3.3.一、使用 Starter Kit

咱們提供了通用的項目模板，你能夠直接使用。對於 Laravel 用戶，咱們也準備了相應的模板，一樣能夠直接下載使用。

若是不但願使用咱們提供的模板，請繼續閱讀。

3.3.二、使用 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.三、引入 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.四、全局配置

在引入 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.五、開始使用

至此，一個基於 Vue 和 Element 的開發環境已經搭建完畢，如今就能夠編寫代碼了。啓動開發模式：

# 執行以下命令後訪問 localhost:8086
npm run dev

編譯：

npm run build

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

3.3.六、示例

修改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 }
})