使用 vue-cli3 建立專案並引入 element

建立專案

vue-cli3建立專案有兩種方式,一種是通過命令列，一種是通過UI介面建立，在此我們使用命令列建立

1、在指定專案根目錄執行 vue create -n my-project 命令初始化專案,注意-n選項,如果不帶-n,初始化專案的時候，也進行git初始化

2、系統提示兩個選項進行選擇：一是預設安裝bable、eslint,二是自定義安裝，我選擇第二種

3、根據羅列出的幾個選項和提示，我只選擇安裝bable,注意：選擇選項的時候，按空格鍵是選擇和不選擇,按A鍵是全選，按I鍵是反選

4、系統提示怎麼設定配置檔案，是單獨配置還是放在package.json檔案裡，我選擇單獨配置

5、最後一步提示，是否將這次建立專案的操作保留，等待以後建立專案的時候使用,我選擇的是否

6、安裝完成，執行npm run serve 命令，訪問http://localhost:8080/

引入 element

1、在專案根目錄執行npm i element-ui -S命令安裝
2、在專案入口檔案main.js引入element

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);

Vue.config.productionTip = false

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

寫一個小demo

<template>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col :span="6">
      <el-row>
        <el-button>賬號登入</el-button>
        <el-button>免密登入</el-button>
      </el-row>
      <el-form label-width="80px" size="medium" class="login-form">
          <el-form-item label="郵箱">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="密碼">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="驗證碼">
            <el-input class="login-input"></el-input>
            <div class="captcha" @click="getCaptcha">
              <span class="captcha-content" v-html="captchaTpl"></span>
            </div>
          </el-form-item>
        </el-form>
      <el-row>
        <el-button type="primary">提交</el-button>
        <el-button type="warning">重置</el-button>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
  import createCaptcha  from './../utils/createCaptcha';

  export default {
    data() {
      return {
        captchaTpl:'',
        originCaptcha:'',
      }
    },
    methods: {
      getCaptcha() {
        const captcha = createCaptcha();
        this.captchaTpl = captcha.tpl;
        this.originCaptcha = captcha.captcha;
      }
    },
    beforeMount() {
      this.getCaptcha();
    }
  }
</script>

<style>
  .login-form{
    margin-top: 20px;
  }
  .row-bg{
    margin: 200px auto;
  }
  .login-input{
    width:50%;
  }
  .captcha{
    cursor: pointer;
    width:50%;
    display: inline-block;
    background:#b73636;
    border-radius: 5px;
  }
  .captcha-content{
    font-size: 20px;
    color:white;
    display:inline-flex;
  }
  .captcha-content span{
    width:20px;
  }
  .login-btn{
    width:50%;
    height: 30px;
    line-height: 30px;
    border:1px solid #409EFF;
  }
</style>

結果展示

不是專業前端，寫的有點醜，只是假裝會寫前端，哈哈