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

時間 2020-05-09

標籤前端 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 } })