element就是一個元件庫的， 多加了JavaScript程式碼，其他也沒什麼的了。猶如小程式 。 還是說把JavaScript程式碼，學好。那麼後面的程式碼，寫起來，其實不說易如反掌也差不多的了。 元件就是封裝的一個一個的功能封裝，小功能封裝。 猶如大機器，這裡一個小螺絲，哪裡一個螺絲帽，然後組合起來就是一個大的機器了。

程式也是一樣的。

附錄封裝的官網部分功能，元件程式碼

  1 <template>
  2   <div>
  3     <!-- 7.20增加 -->
  4     <h1>一個程式設計師的自我修養</h1>
  5
 
     <h2>功能封裝網站</h2>
  6     <!-- 1 Layout 佈局-->
  7     <h3>1 這是Layout 佈局</h3>
  8     <h4>通過基礎的 24 分欄，迅速簡便地建立佈局。</h4>
  9     <p>官網連結 https://element.eleme.cn/#/zh-CN/component/layout</p>
 10     <el-row :gutter="20">
 11       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 12
 
       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 13       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 14       <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
 15
 
     </el-row>
 16     <!-- 1 -->
 17 
 18     <!-- 2 下拉重新整理頂部 -->
 19     <h3> 2 下拉重新整理</h3>
 20     <el-select v-model="value" placeholder="點選可以下拉重新整理 請選擇">
 21       <el-option
 22         v-for="item in options"
 23         :key="item.value"
 24         :label="item.label"
 25         :value="item.value"
 26       >
 27       </el-option>
 28     </el-select>
 29     <!-- 2 下拉重新整理底部 -->
 30     <!-- 3 Container 佈局容器-->
 31     <h3> 3 Container 佈局容器</h3>
 32     <el-container>
 33   <el-header>Header</el-header>
 34   <el-main>Main</el-main>
 35 </el-container>
 36 
 37 <el-container>
 38   
 39   <el-footer>Footer</el-footer>
 40 </el-container>
 41 <!-- 3 -->
 42 <!-- 4 Color 色彩 --> 
 43 <h3> 4 Color 色彩</h3>
 44    <h3 id="a"> color 色彩 主色 </h3>
 45    <p class="box">class box顏色</p>
 46 <!-- 5 icon -->
 47 <h3> 5 Icon 圖示</h3>
 48 <i class="el-icon-edit"></i>
 49 <i class="el-icon-share"></i>
 50 <i class="el-icon-delete"></i>
 51 <p>下載快取</p>
 52 <i class="el-icon-loading"></i>
 53 <el-button type="primary" icon="el-icon-search">搜尋</el-button>
 54 <!-- 5 -->
 55 <!-- 6button -->
 56 <h3>6 button 按鈕</h3>
 57 <el-row>
 58   <el-button>預設按鈕</el-button>
 59   <el-button type="primary">主要按鈕</el-button>
 60   <el-button type="success">成功按鈕</el-button>
 61   <el-button type="info">資訊按鈕</el-button>
 62   <el-button type="warning">警告按鈕</el-button>
 63   <el-button type="danger">危險按鈕</el-button>
 64 </el-row>
 65 <!-- 6 -->
 66 <!-- 7對話方塊測試，，， 見testdialog檔案 --> 
 67 <!-- 8  Popconfirm 氣泡確認框 -->
 68  <h3> 8 點選刪除 確認刪除框</h3>
 69 <el-popconfirm
 70   title="這是一段內容確定刪除嗎？"
 71 >
 72   <el-button slot="reference">刪除</el-button>
 73 </el-popconfirm>
 74 <!-- 8 -->
 75   </div>
 76 </template>
 77 
 78 <script>
 79 export default {
 80   data() {
 81     return {
 82       
 83       // 下拉重新整理頂部
 84       options: [
 85         {
 86           value: "下拉選擇1",
 87           label: "第一個label",
 88         },
 89         {
 90           value: "選擇2",
 91           label: "第二個標籤",
 92         },
 93         {
 94           value: "選擇3",
 95           label: "第三個標籤",
 96         },
 97       ],
 98       value: "",
 99     };
100   },
101 };
102 // 下拉重新整理底部
103 </script>
104 
105 
106 <style>
107 
108 /* 4 Color 色彩 */
109 .a {
110     color: #409EFF;
111 }
112 .b {
113     color: #ff40c6;
114 }
115 /* 4 Color 色彩 */
116 
117 /* 3 Container 佈局容器*/
118 .el-header, .el-footer {
119     background-color: rgb(0, 81, 255);
120     color:#333;
121     /*  text-align 水平對齊 */
122     text-align: center;
123     /* line height 設定行高 */
124     line-height: 60px;
125 }
126 /* 3 Container 佈局容器*/
127 
128 /* 1 Layout 佈局樣式 */
129 /* .el-row {
130     margin-bottom: 20px; }
131     &:last-child {
132       margin-bottom: 0;
133    
134   } */
135 .el-col {
136   border-radius: 4px;
137 }
138 .bg-purple-dark {
139   background: #99a9bf;
140 }
141 .bg-purple {
142   background: #d3dce6;
143 }
144 .bg-purple-light {
145   background: #e5e9f2;
146 }
147 .grid-content {
148   border-radius: 4px;
149   min-height: 36px;
150 }
151 .row-bg {
152   padding: 10px 0;
153   background-color: #f9fafc;
154 }
155 /* 1 Layout 佈局樣式 */
156 
157 
158 
159 </style>

路由程式碼

  //1 下拉重新整理 
   {
    path:'/test1',
    name:'test1',
    component:()=>import('../views/Test1.vue')
  },

　　效果