ElementUI 快速入門

一、概述

Element,一套為開發者、設計師和產品經理准備的基於 Vue 2.0 的桌面端組件庫指南 了解設計指南,幫助產品設計人員搭建邏輯清晰、結構合理且高效易用的產品。

 

二、登錄演示

環境說明

nodejs版本：v12.15.0

npm版本：6.13.4

vue版本：2.5.2

 

安裝nodejs

訪問官方鏈接：https://nodejs.org/en/download/

下載LTS版本，windows系統，下載msi文件，然后一路下一步安裝即可。

 

全局安裝vue-cli

設置淘寶更新源

npm config set registry https://registry.npm.taobao.org 

 

安裝vue-cli

npm install --global vue-cli

 

安裝后，檢查是否安裝成功。 (在此注意V為大寫)

vue -V

 

創建項目

vue init webpack my-project

執行之后，會有一段提示信息

? Project name (my-project) #回車 ? Project description  #回車，也可以寫點項目描述 ? Author #回車，或者輸入作者 ? Vue build standalone #回車 ? Install vue-router? (Y/n) #這里是官方推薦的路由，果斷yes ? Use ESLint to lint your code? #No
? Set up unit tests #No ? Setup e2e tests with Nightwatch? #No
? Should we run `npm install` for you after the project has been created? (recommended)
> Yes, use NPM #可以按上下方向鍵選擇，這里我選第一個NPM，按回車確認
  Yes, use Yarn
  No, I will handle that myself

完成后可能會有警告信息，沒事，不是ERR就好

 

安裝element-ui

按照官方方法，執行：

npm i element-ui -S

安裝完成之后，會在 package.json記錄版本

"devDependencies": {
...
...
"element-ui": "^2.14.1"

 

進入項目目錄

cd my-project

 

使用以下命令啟動vue項目

npm run dev

運行完成之后，訪問頁面：

http://localhost:8080/

效果如下：

 

使用ElementUI

打開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 ElementUI from 'element-ui' //新添加
import 'element-ui/lib/theme-chalk/index.css' //新添加，避免后期打包樣式不同，要放在import App from './App';之前
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.use(ElementUI)   //新添加
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

添加了這三行，我們就可以使用element-ui了
接下來在components文件夾內新建一個Login.vue 文件，添加如下代碼

<template>
  <div>
    <!-- 在使用表單驗證時，需要注意：
    1.必須給表單對象綁定一個對象：:model="loginForm"，而且不能寫成：v-model="loginForm"
    2.所有的子控件的綁定對象必須是表單對象的內部對象，比如：v-model="loginForm.username"，否則總是驗證失敗
     -->
    <el-form class="login-container" :model="loginForm" ref="loginForm"
             :rules="rules" label-position="left">
      <h3 class="login-title">系統登錄</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="用戶名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密碼"></el-input>
      </el-form-item>
      <el-checkbox class="login-remember" v-model="checked">記住密碼</el-checkbox>
      <el-form-item>
        <el-button class="login-button" type="primary" @click="submitClick('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        rules: {
          username: [
            { required: true, message: '請輸入用戶名', trigger: 'blur'}
          ],
          password: [
            { required: true, message: '請輸入密碼', trigger: 'blur'}
          ]
        },
        loginForm: {
          username: "admin",
          password: "123"
        },
        checked: true
      };
    },
    methods: {
      submitClick(formName) {
        // 表單驗證
        this.$refs[formName].validate(valid => {
          if(valid) {
            alert('提交成功！')
          } else {
            console.log("error submit！")
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .login-container{
    width: 350px;
    margin: 40px auto;
    background-clip: padding-box;
    padding: 35px 35px 15px 35px;
    border: 1px solid #eaeaea;
    border-radius: 15px;
    box-shadow: 0 0 25px #cac6c6;
    background: #fff;
  }
  .login-title{
    margin: 0 auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .login-remember{
    margin: 0 0 35px 0;
    text-align: center;
  }
  .login-button{
    width: 100%;
  }
</style>

 

注意事項
1.<el-form-item>一定要寫在<el-form>內
2.在使用表單驗證時，需要注意：
（1）必須給表單對象綁定一個對象：:model=“loginForm”，而且不能寫成：v-model=“loginForm”
（2）所有的子控件的綁定對象必須是表單對象的內部對象，比如：v-model=“loginForm.username”，否則總是驗證失敗

 

 

打開router/index.js，添加新路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from "@/components/Login"

Vue.use(Router)

export default new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { path: '/login',
      name: 'Login', component: Login },
  ]
})

 

打開App.vue，修改一下樣式

<template>
  <div id="app">
    <div style="text-align: center;">
      <img alt="Vue logo" src="./assets/logo.png">
    </div>

    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

 

訪問登錄頁面

http://localhost:8080/login

效果如下：

 

 

 

本文參考鏈接：

https://blog.csdn.net/panchang199266/article/details/90705797