文章目錄

- 1.2 總結
- 1.3 Vue的生命周期
- 1.4 npm 概念
- 1.5 webpack 概念
2 Vue腳手架
- 2.1 概述
- 2.2 安裝
- - 2.2.1 安裝nodejs,下一步下一步就可以,可以安裝最新的15版本,win7的話可以安裝14版本.使用以下dos命令提示符下執行：
  - 2.2.2 修改npm的鏡像(下載的快) :
  - 2.2.3 正式安裝(沒有飄紅ERR就行了):
  - 2.2.4 下載/創建 vue專案
  - 2.2.5 檢測vue專案是否下載完了
  - 2.2.6 測驗專案
  - 2.2.7 用Hbuilder打開Vue專案
3 HBuilderX管理Vue專案
- 3.1 打開Vue專案
- 3.2 結構
- 3.4 目錄結構
- 3.5 重要檔案說明
4 在Vue專案中添加自定義組件
- 4.1 概述
- 4.2 專案結構
- 4.1 創建Car.vue檔案-自定義組件
- 4.2 修改App.vue檔案
- 4.3 測驗
5 練習自定義組件
- 5.1 創建person.vue的組件
- 5.2 修改App.vue,引入自定義組件
- 5.3 測驗
6 ElementUI
- 6.1 概述
- 6.2 使用步驟
- 6.3 修改main.js,引入elementui
- 6.4 布局 layout
- 6.5 圖示 icon
- 6.6 按鈕 button
- 6.7 輸入框 input
- 6.8 表格 table
- 6.9 表單
- 6.10 測驗,修改自定義組件person.vue/car.vue
- 6.11 常見錯誤

# 1 Vue練習 ## 1.1 練習：根據不同元素，展示不同的網址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>練習vue路由</title>
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
	</head>
	<body>
		<!-- 需求:點擊不同的元素,展示不同的網址 -->
		<div id="app">
			<router-link to="/runoob">runoob</router-link>
			<router-link to="/w3c">w3c</router-link>
			<router-view></router-view>
		</div>
		<script>
			let router = new VueRouter({
				routes:[ //把不同的請求,分發給不同的組件處理
					{ //點擊runoob時,匹配到對應的組件,展示runoob的網址
						path:'/runoob',
						component:{
							template:'<h1><a href="https://www.runoob.com">https://www.runoob.com/</a></h1>',
						},
					},
					{ //點擊w3c時,匹配到對應的組件,展示w3c的網址
						path:'/w3c',
						component:{
							template:'<h1><a href="https://www.w3school.com.cn">https://www.w3school.com.cn/</a></h1>',
						},
					}
				]
			})
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

1.2 總結

請添加圖片描述

1.3 Vue的生命周期

使用vue做專案時，我們需要了解vue物件的生命周期和生命周期函式（Vue 實體從創建到銷毀的程序），這樣才能知道哪些事情應該在哪個函式里做，

如頁面創建時，頁面加載時，頁面更新時，頁面銷毀時？

在這程序中，我們在每個特定階段會觸發一些方法（這些方法具備一些功能），我們給這些方法起了名字叫做生命周期鉤子函式/組件鉤子，

生命周期函式：

vue實體在某一個時間點會自動執行這些函式；
生命周期鉤子函式不允許寫成箭頭函式；

可以分為3個階段，一共8個鉤子：初始化階段（創建前/后, 載入前/后），運行中（更新前/后），銷毀（銷毀前/銷毀后）

細分每個程序：

在這里插入圖片描述

請添加圖片描述

1.4 npm 概念

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）

npm 為你和你的團隊打開了連接整個 JavaScript 世界的一扇大門，它是世界上最大的軟體注冊表，每星期大約有 30 億次的下載量，包含超過 600000 個包（package）（即，代碼模塊），來自各大洲的開源軟體開發者使用 npm 互相分享和借鑒，包的結構使您能夠輕松跟蹤依賴項和版本，

官網：

https://docs.npmjs.com/about-npm 英文官網

https://www.npmjs.cn/ 中文官網

1.5 webpack 概念

Webpack是前端自動化構建工具，它基于nodejs實作，可以幫助我們實作資源的合并、打包、壓縮、混淆的諸多功能，可以快速構建一個Vue專案，包括各類檔案（assets資源、scripts腳本、images圖片、styles樣式），

官網：

https://webpack.js.org/

2 Vue腳手架

2.1 概述

vue腳手架指的是vue-cli，是指Vue的客戶端，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程式而且可用于自動生成vue和webpack的專案模板，是使用vue專案的提前，
vue-cli就是Vue的腳手架工具，vue腳手架提供了豐富的功能,只要安裝成功,就可以使用的，和我們工地看到的腳手架真是那么一回事，它幫助我們搭建基本的開發環境，好比架子搭建好了，利用它可以搞定目錄結構，本地除錯，單元測驗，熱加載及代碼部署等，
vue-cli是由Vue提供的一個官方cli，專門為單頁面應用快速搭建繁雜的腳手架，它是用于自動生成vue.js+webpack的專案模板，是為現代前端作業流提供了 batteries-included 的構建設定，只需要幾分鐘的時間就可以運行起來并帶有熱多載，保存時 lint 校驗，以及生產環境可用的構建版本
在這里插入圖片描述

2.2 安裝

2.2.1 安裝nodejs,下一步下一步就可以,可以安裝最新的15版本,win7的話可以安裝14版本.使用以下dos命令提示符下執行：

node -v # v8.11.3，至少8以上,最新的是v15.11.0

2.2.2 修改npm的鏡像(下載的快) :

npm config get registry # 查看當前配置的鏡像，結果是默認的國外網址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #修改下載資源的網址成taobao，設定成淘寶鏡像

npm config get registry #再獲取查看,結果是修改后的https://registry.npm.taobao.org/

2.2.3 正式安裝(沒有飄紅ERR就行了):

vue-cli: 用戶生成Vue工程模板（幫你快速構建一個vue的專案，也就是給你一套vue的結構，包含基礎的依賴庫）
vue-cli: 腳手架工具安裝與配置（需要幾分鐘）

npm install vue-cli -g  #全域安裝vue腳手架---可能比較慢,要等幾分鐘

npm uninstall vue-cli -g #卸載vue-cli腳手架 --- 大可不必

vue –V #查看腳手架的版本

where vue #查看vue腳手架安裝在哪里

2.2.4 下載/創建 vue專案

基于vue.js的官方webpack模板：(亂碼無需理會)，指定一個作業空間的路徑,存放vue專案的代碼

webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發布的靜態資源做相應的準備，比如資源的合并和打包

在作業空間的位置,輸入cmd,敲入回車,輸入以下命令:
vue init webpack jt01  #利用腳手架下載jt01的專案100M+，此處專案名不能使用大寫---可能比較慢,要等
進行一些選項的配置,yes/no,參考下圖選答案.

請添加圖片描述
注：
1. jt01 為自定義的專案名稱
2. 產生專案webpack模板，目錄100+m，可見內容多復雜，龐大
3. 會自動生成node_modules臨時目錄，可以洗掉，每次編譯、運行會自動產生

2.2.5 檢測vue專案是否下載完了

原則是: 一路沒有遇到飄紅的ERR的話,就可以了

2.2.6 測驗專案

按照提示,再執行兩條命令:

cd jt08  #進入專案檔案夾里
npm run dev  #啟動專案，ctrl+c 停止,可能要等幾分鐘
DONE  Compiled successfully in 9949ms #表示專案啟動成功
打開瀏覽器訪問:http://localhost:8080

注意：埠號可能不同，默認為8080，如果發現埠占用npm很聰明，它會自動改變埠號，以其具體提示的埠資訊為準，

2.2.7 用Hbuilder打開Vue專案

檔案–打開目錄–選中剛剛下載好的vue專案–確定

3 HBuilderX管理Vue專案

3.1 打開Vue專案

HBuilderX是最新前端開發利器之一，全面支持Vue的開發，具有豐富的提示，使用它打開：D:\workspace\vue\jt01目錄（可自行定義自己的目錄）
請添加圖片描述

3.2 結構

請添加圖片描述

3.4 目錄結構

這個目錄結構非常重要，大家要熟記，就如你要生孩子去婦幼保健院，你要游泳去游泳館，規定好每個目錄的作用，方式和位置就約定統一了，有了這套規則，檔案就不會亂放，這樣找資源時就知道到哪里找，寫代碼檔案時就按功能放到指定的目錄中，這種方式已經非常常見，如Maven構建專案目錄有強制的約定，如Spring框架中約定大于配置，

view 就是用戶要訪問的頁面都存放在這個目錄下，如Index.vue
static中保存一些靜態的資源，如jquery、css、圖片等
src 目錄是一個很大的目錄，包羅萬象
components 把專案中所需要的組件都放在此目錄下，默認會創建一個HelloWorld.vue，我們可以自己添加，如添加Header.vue
router 訪問的路徑，Vue提倡的是SPA（Single Page WebApplication）單頁面設計，這是以前舊頁面中如果包含其他資源，必然涉及到路徑問題，Html沒有很好的解決這個問題，而router它是一種解決路徑的新發明，很好的解決了多模塊頁面重繪問題，簡而言之就是給組件指明一個路徑，我們怎么去訪問它，不同組件是依靠配置的路徑router來訪問的，Router非常強大，老系統是url改變是在服務端進行重繪，而router支持在客戶端重繪，就是url變化，頁面內容變化，但不請求服務器端，以前的程式是做不到的，此處不好理解，后期專門章節論述，不必心急，先記錄下這個特點

請添加圖片描述

3.5 重要檔案說明

Vue專案這么多檔案，它們什么關系？寫代碼該從哪里下手呢？
常見操作: 1, 在components里寫自定義組件 2, 在App.vue里注冊自定義組件 3, 在main.js里引入第三方js

index.html 首頁，Vue是SPA單頁面開發，頁面入口，定義了一個div,并設定id=app
src/main.js 公共的組件就直接配置到這個檔案中，私有的就配置到view中

請添加圖片描述

src/App.vue 根組件,可以添加自定義組件、
src/router/index.js 引入子組件HellWorld.vue

請添加圖片描述

簡單來說專案加載的程序是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

可以看到Vue專案是自有一套規則，一套機制的，非常系統化的，有固定的檔案，有自定義的檔案，各自放在指定的目錄下，指定的檔案中，指定的地方，最終來實作用戶的需求，那在開發之前，你就必須了解這套機制，寫代碼的時候就規則清晰，如有神助，知道該如果寫代碼，知道為什么這么寫，代碼檔案該放在哪，它們是誰呼叫誰，互相怎么呼叫的了，

為什么要花這么大篇幅講這幾個檔案呢？
很多同學寫代碼時，聽老師講沒問題，可自己做就亂了方寸，腦袋空白甚至都是漿糊，不知道代碼該寫在哪里？不知道出錯了該如何下手，這是為何呢？老師都教了啊？就是自己沒有去把所學的知識系統的、有效的組織起來，內容還只是一個一個點，無法把這些點很好的連接起來形成線，先在形成面，面在形成體，點線面體真正組織起來，才會逐漸清晰代碼的整體程序，

那如何做到呢？

思考，但復雜的事務不是馬上腦袋就能跟上的，得暈好久呢，那怎么辦，真正的絕招，多敲多練，反復練習中慢慢總結出其真正的規律，就像我們打游戲，游戲高手，不是天生，是反復練習，反復失敗，失敗就是成功之母，這句話是真的，

4 在Vue專案中添加自定義組件

4.1 概述

組件（Component）是 Vue.js 最強大的功能之一，
組件可以擴展 HTML 元素，封裝可重用的代碼，
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意型別的應用的界面都可以抽象為一個組件樹

4.2 專案結構

請添加圖片描述

4.1 創建Car.vue檔案-自定義組件

位置:在src/components檔案夾里

<!-- 寫HTML的代碼 -->
<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>
<!-- 寫js的代碼 -->
<script>
// 提供一個支持匯出的組件
export default{
  name:'Car' ,//組件名稱,通常和檔案名一致
  data(){   //準備回傳資料
    return{
      msg:'hello vue~~'
    }
  }
}
</script>
<!-- 寫css的代碼 -->
<style>
</style>

4.2 修改App.vue檔案

把自定義組件,引入到這個檔案里

<template>
  <div id="app">
    <!-- 3.使用自定義組件,當做HTML元素-->
    <Car></Car>
  </div>
</template>
<script>
  //1.匯入指定位置的自定組件car.vue
  import Car from './components/Car.vue'
  //2,使用components屬性,使用自定義組件
export default {
  name: 'App',
  components:{
    Car //注冊剛付訓入的自定義組件
  }
}
</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>

4.3 測驗

服務器保證是啟動的,編譯了新的代碼
在瀏覽器里http://localhost:8080/測驗

請添加圖片描述

5 練習自定義組件

5.1 創建person.vue的組件

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  name:'person',
  data(){
    return{
      name:'jack'
    }
  }
}
</script>

<style>
</style>

5.2 修改App.vue,引入自定義組件

<template>
  <div id="app">
    <!-- 3.使用自定義組件,當做HTML元素-->
    <Car></Car>
    <person></person>
  </div>
</template>
<script>
  //1.匯入指定位置的自定組件car.vue
  import Car from './components/Car.vue'
  import person from './components/person.vue'
  //2,使用components屬性,使用自定義組件
export default {
  name: 'App',
  components:{
    Car , //注冊剛付訓入的自定義組件
    person
  }
}
</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>

5.3 測驗

在DOS視窗敲個回車(目的是自動編譯新的代碼)
打開瀏覽器,重繪看新資料http://localhost:8080

6 ElementUI

6.1 概述

是Element提供的一套漂亮的前端網頁展示的效果

訪問官網: https://element.eleme.cn/#/zh-CN/component/installation,查看組件指南

6.2 使用步驟

在當前工程里,下載element-ui的工具

在這里插入圖片描述

npm i element-ui -S  #安裝element-ui

檢查下載的結果

6.3 修改main.js,引入elementui

// 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 App from './App'
import router from './router'

//引入第三方的ElementUI來美化頁面
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

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

6.4 布局 layout

柵格體系：把頁面分成24分欄，可以形成PC端、移動端自適應，

<template>
  <div>
<!-- 2.使用ele的柵格,默認24列,可以自適應螢屏的寬度 -->
<!-- el-row表示行,el-col表示列 ,:span合并列數-->
  <el-row> 
    <el-col :span="24">123</el-col>
  </el-row>
  <el-row>
    <el-col :span="12">abc</el-col>
    <el-col :span="12">123</el-col>
  </el-row>

  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

6.5 圖示 icon

https://element.eleme.cn/#/zh-CN/component/icon
在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
    <!-- 1.使用ele的各種圖示-->
     <i class="el-icon-edit"></i>
     <i class="el-icon-share"></i>
     <i class="el-icon-delete"></i>
     <i class="el-icon-eleme"></i>
  
  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

6.6 按鈕 button

https://element.eleme.cn/#/zh-CN/component/button

在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
    <!-- 1.使用ele的各種按鈕-->
     <el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">資訊按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
  
  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統'
      }
    }
  }
</script>

<style>
</style>

6.7 輸入框 input

  <el-input placeholder="用戶名" v-model="msg"></el-input>
  <el-input placeholder="密碼" v-model="msg" show-password></el-input>


<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

6.8 表格 table

https://element.eleme.cn/#/zh-CN/component/table

在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
    
    <!-- 3.使用ele的表格,a創建表格,b準備資料,c系結資料 -->
    <el-row >
      <el-button type="info" @click="toadd">新增</el-button>
    </el-row>
  	<el-table :data="list">
       <el-table-column label="編號" prop="id"></el-table-column>
       <el-table-column label="標題" prop="title"></el-table-column>
       <el-table-column label="賣點" prop="sell"></el-table-column>
       <el-table-column label="描述" prop="desc"></el-table-column>
       <el-table-column label="更多">
          <el-button type="primary" @click="toupdate()">編輯</el-button>
          <el-button type="success" @click="del()">洗掉</el-button>
       </el-table-column>
     </el-table>
  </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統',
        // b. 準備表格要的資料
         list:[
          {
            id:100,
            title:'鴻星爾克',
            sell:'為中國代言',
            desc:'to be no.1'
          },
          {
            id:101,
            title:'蜜雪冰城',
            sell:'一瓶只賺1毛錢',
            desc:'你愛我我愛你蜜雪冰城甜蜜蜜'
          },
          {
            id:102,
            title:'特步',
            sell:'有一種踩.的感覺',
            desc:'飛一樣的感覺'
          }
        ]
      }
    },
   // 1,宣告按鈕  2,添加事件methods 3,給按鈕系結事件@click
    methods:{
        toadd:function(){
          console.log("新增業務成功")
        },
        toupdate:function(){
          console.log("修改業務成功")
        },
        del:function(){
          console.log("洗掉成功")
        }
      }
  }
</script>

<style>
</style>

6.9 表單

https://element.eleme.cn/#/zh-CN/component/form
在這里插入圖片描述

<template>
  <!-- 獲取值 -->
  <div>
	<!-- 制作表單 el-form表示表單,el-form-item表示表單項
1,資料區提供資料 2,給form指定雙向系結:model="form" 3,input雙向系結獲取資料v-model="form.price"
  -->
    <el-form label-width="100px" :model="form">
    <el-form-item label="標題">
      <el-input placeholder="請輸入標題" v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="賣點">
      <el-input v-model="form.sell"></el-input>
    </el-form-item>
    <el-form-item label="價格">
      <el-input v-model="form.price"></el-input>
    </el-form-item>
    <el-form-item label="詳情">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="save()" type="success">保存</el-button>
    </el-form-item>
  </el-form>

    </div>
</template>

<script>
  // 定義匯出的組件
  export default{
    name:'Item',
    data(){
      return{
        msg:'京淘電商管理系統',
        //給表單準備資料,資料驅動,雙向系結
        msg:'hi components',
        form:{
          title:"test",
          sell:'爆款熱銷',
          price:999,
          desc:"我是詳情..."
        },
      }
    },
   // 1,宣告按鈕  2,添加事件methods 3,給按鈕系結事件@click
    methods:{
      save:function(){ //表單提交
        // console.log("submit")
        console.log(this.m) //呼叫上面的變數m
      }
      }
  }
</script>

<style>
</style>

6.10 測驗,修改自定義組件person.vue/car.vue

<!-- 寫HTML的代碼 -->
<template>
  <div>
    <h1>{{msg}}</h1>

    <!-- 1.按鈕 -->
    <el-button type="success">成功按鈕</el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    <!-- 2.布局,每行默認是24分格,自由組合
      :span屬性表示合并列,el-row表示行元素,el-col表示列元素
    -->
    <el-row>
      <el-col :span="2">123</el-col>
      <el-col :span="12">456</el-col>
    </el-row>
    <!-- 3.圖示,i表示圖示網頁的元素,class屬性指定要用哪個圖示-->
    <i class="el-icon-share"></i>
    <i class="el-icon-s-flag"></i>
    <!-- 4.按鈕,el-button按鈕效果,type設定顏色,circle圓形,icon給按鈕加圖示-->
    <el-button type="success" round icon="el-icon-search">立即注冊</el-button>
    <el-button type="success" circle icon="el-icon-delete"></el-button>

  </div>
</template>
<!-- 寫js的代碼 -->
<script>
// 提供一個支持匯出的組件
export default{
  name:'Car' , //組件名稱,通常和檔案名一致
  data(){   //準備回傳資料
    return{
      msg:'hello vue~~'
    }
  }
}
</script>
<!-- 寫css的代碼 -->
<style>
</style>

6.11 常見錯誤

Permission denied
權限不足，windows以管理員身份運行，mac命令前加sudo 請添加圖片描述 Unexpected end of JSON input while parsing near

清除快取，重新安裝

npm cache clean --force

npm install

unable to verify the first certificate
在這里插入圖片描述
解決方法: 取消ssl驗證：npm config set strict-ssl false,再次安裝

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

在這里插入圖片描述
打開（如果不是默認的檔案夾，是自定義的檔案夾路徑的話就是在自定義檔案夾的目錄下）

C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js 
將下面這行注釋：rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改為：  rejectUnauthorized : false    
重新運行：  vue init webpack project-name  就可以了

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/330348.html

標籤：其他

上一篇：通過vue或jQuery實作checkbox全選反選的方法

下一篇：forEach用法與map用法區別

階段五：Vue進階

文章目錄

1.2 總結

1.3 Vue的生命周期

1.4 npm 概念

1.5 webpack 概念

2 Vue腳手架

2.1 概述

2.2 安裝

2.2.1 安裝nodejs,下一步下一步就可以,可以安裝最新的15版本,win7的話可以安裝14版本.使用以下dos命令提示符下執行：

2.2.2 修改npm的鏡像(下載的快) :

2.2.3 正式安裝(沒有飄紅ERR就行了):

2.2.4 下載/創建 vue專案

2.2.5 檢測vue專案是否下載完了

2.2.6 測驗專案

2.2.7 用Hbuilder打開Vue專案

3 HBuilderX管理Vue專案

3.1 打開Vue專案

3.2 結構

3.4 目錄結構

3.5 重要檔案說明

4 在Vue專案中添加自定義組件

4.1 概述

4.2 專案結構

4.1 創建Car.vue檔案-自定義組件

4.2 修改App.vue檔案

4.3 測驗

5 練習自定義組件

5.1 創建person.vue的組件

5.2 修改App.vue,引入自定義組件

5.3 測驗

6 ElementUI

6.1 概述

6.2 使用步驟

6.3 修改main.js,引入elementui

6.4 布局 layout

6.5 圖示 icon

6.6 按鈕 button

6.7 輸入框 input

6.8 表格 table

6.9 表單

6.10 測驗,修改自定義組件person.vue/car.vue

6.11 常見錯誤