前端技術棧：5分鐘入門VUE+Element UI

首頁>技術>程式碼狂魔2021-02-04 18:42

前端技術棧：5分鐘入門VUE+Element UI

前言

2021了，VUE都出3.0了，還不開始學習VUE？那不是一個全棧攻城獅的自我修養，雖然VUE出3.0了，但是入門還是建議VUE2.0 + Element UI，畢竟3.0還要等養肥了在學，現在教程太少，學習2.0之後在學3.0也能更加理解為什麼要這麼去改進

VUE是啥？簡單來說就是一個JS框架

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

此處可以看VUE入門影片：https://learning.dcloud.io/#/?vid=0

本教程是給有一點基礎的人進行VUE的快速入門，搭建一個單頁面的增刪改查。

效果演示Nodejs

現在的前端都是模組化開發了，需要Nodejs的支援，到官網下載Nodejs一路Next即可安裝，官網地址：https://nodejs.org/en/

安裝好後開啟cmd命令列視窗，輸出node -v，如果有版本號說明安裝成功，同樣輸入npm -V如果有版本號說明npm安裝成功(npm為nodejs的包管理器)

json-server

在實戰VUE之前先了解下json-server，顧名思義json伺服器，在我們的入門實戰中，不想引入太過於複雜的後端環境但是又想體驗模組化的前端整個HTTP請求的完整過程，所幸Nodejs提供了json-server工具，方便快速的搭建簡易伺服器。

安裝json-server

npm i json-server -g

i表示install，即安裝-g表示global，即全域性安裝執行json-server

隨便找個目錄，建立一個db.json檔案，內容如下

{  "data": []}

然後在該目錄下開啟命令列視窗，執行

json-server --watch db.json

回顯如下說明成功

  \{^_^}/ hi!  Loading db.json  Done  Resources  http://localhost:3000/data  Home  http://localhost:3000  Type s + enter at any time to create a snapshot of the database  Watching...

測試json-server

http://localhost:3000/data是介面地址，直接用curl傳送POST,DELETE,PATCH,GET請求模擬增刪改查，只要測試一個通過了即可，其他的感興趣可以測試下。

增(POST)

curl "http://127.0.0.1:3000/data" -H "Content-Type: application/json" -d "{\"name\":\"zhangsan\"}" -X POST

-H表示增加請求頭-d後面是資料-X POST表示用POST請求

返回值如下

{  "name": "zhangsan",  "id": 2}

再看一下我們剛才建立的db.json檔案，裡面多了我們剛才POST的資料。實際上就是存在了這個檔案裡面。

改(PATCH)

注意改的時候url後面跟上id

curl "http://127.0.0.1:3000/data/2"  -H "Content-Type: application/json" -d "{\"name\":\"lisi\"}"  -X PATCH

返回如下

{  "name": "lisi",  "id": 2}

說明修改成功

查(GET)

curl "http://127.0.0.1:3000/data"  -X GET

直接查全部

curl "http://127.0.0.1:3000/data/2" -X DELETE

返回如下

{}

VUE實戰全域性安裝vue-cli

vue-cli是vue的腳手架，所謂腳手架說白了就是快速建立模板化的專案，不用每次建立專案都去重複那些固定化的操作，注意我們安裝的是vue2.0的腳手架

npm install -g vue-cli

不要和vue3.0的混淆，vue3.0是npm install -g @vue/cli，此處不需要安裝3.0，否則會衝突

全域性安裝webpack

webpack可以將vue專案打包成靜態檔案

npm install webpack -g

vue 2.0 + Element UI 專案搭建基礎版本搭建

隨便找個目錄輸入如下命令

# 初始化一個叫做vue2_elementui的專案，使用webpack模板vue init webpack-simple vue2_elementui# 進入專案目錄cd vue2_elementui# 構建npm install# 執行npm run dev

經過上面的操作，開啟http://localhost:8080/如果能看到下面的頁面說明搭建成功了

引入Element UI

上面的先CTRL + C退出，下面安裝Element UI依賴

# 安裝Element UInpm install element-ui -S# 順便安裝vue-router 和 vue-resource，前者是路由，後者是執行Ajax請求用到的依賴npm install vue-router vue-resource --S# 安裝moment，事件選擇元件npm install moment -S

-S表示只在該專案下安裝，不是全域性安裝

開啟main.js，引入上面安裝的元件

import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)import axios from 'axios'import moment  from 'moment'Vue.filter('moment', function (value, formatString) {  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';  return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723});Vue.prototype.$axios = axiosnew Vue({  el: '#app',  render: h => h(App)})

開啟APP.vue，修改如下

<template>  <div id="app">     <img src="./assets/logo.png">    <div>      <el-button @click="startHacking">element ui 安裝成功</el-button>    </div>  </div></template><script>export default {  methods: {    startHacking () {      this.$notify({        title: 'It works!',        type: 'success',        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',        duration: 5000      })    }  },  components:{    UserInfo  }}</script><style>#app {  font-family: Helvetica, sans-serif;  text-align: center;}</style>

最後再次執行

其中引入了AddUser元件和EditUser元件

在APP.vue中引入元件

APP.vue修改如下，其中import UserInfo from './UserInfo'表示引入元件

<UserInfo></UserInfo>表示呼叫該元件

<template>  <div id="app">     <img src="./assets/logo.png">    <div>      <el-button @click="startHacking">element ui 安裝成功</el-button>    </div>    <hr>    <UserInfo></UserInfo>  </div></template><script>import UserInfo from './UserInfo'export default {  methods: {    startHacking () {      this.$notify({        title: 'It works!',        type: 'success',        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',        duration: 5000      })    }  },  components:{    UserInfo  }}</script><style>#app {  font-family: Helvetica, sans-serif;  text-align: center;}</style>

最後開啟頁面，看看是否能增刪改查

此時，專案結構如下圖所示

總結

此處假設你已經看過VUE基礎影片了：https://learning.dcloud.io/#/?vid=0

main.js

main.js很重要，裡面定義了入口元件APP.vue；引入了專案所需要的包

元件三件套

分別是template，script，style，新元件就這樣來定義

<template> //定義該元件的模板</template><script>import com1 from 'XXX'import com2 from 'XXX'export default {  name: '元件名字',  data () {    return {        //定義元件資料      },    }  },  methods:{    //定義元件方法  },  created(){    this.getUserInfo()  },  components:{    com1,com2//定義改元件引用的其他元件  }}</script><style>//定義該元件用到的樣式</style>

元件的屬性

在AddUser.vue元件中，有一個鍵叫props，裡面有一個dialogAdd

<script>export default {  name: 'AddUser',  props:{    dialogAdd:Object  }}</script>

這表示該元件可以用到的屬性，在UserInfo.vue裡面這麼引用AddUser元件的

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>

在AddUser上面綁定了一個dialogAdd屬性，這會傳到AddUser.vue元件裡面控制AddUser的顯示與隱藏，有點像父子元件之前的通訊

$emit觸發自定義事件

在AddUser.vue元件中，有一個自定義事件

this.$emit('update');

這會給父元件UserInfo觸發一個update事件，父元件自然會呼叫@update中定義的方法getUserInfo重新查詢資料並載入頁面，總結兩句話就是：

父元件可以使用 props 把資料傳給子元件子元件可以使用 $emit 觸發父元件的自定義事件Element UI

ElementUI相關問題可以參考官方文件：https://element.eleme.cn/#/zh-CN/component/installation

劇多

前端技術棧：5分鐘入門VUE+Element UI