Vue Element Template是Vue.js和Element UI的模板結(jié)合體，是基于Vue CLI 3構(gòu)建的快速開發(fā)模板。Vue Element Template已經(jīng)將Element UI引入到Vue.js中形成了統(tǒng)一的UI風(fēng)格，同時(shí)也擁有了Vue.js的強(qiáng)大功能。

Vue Element Template的使用非常簡單，我們只需要在命令行中使用如下命令創(chuàng)建一個(gè)新的項(xiàng)目：

vue create my-project

在安裝時(shí)選擇default preset，然后我們輸入如下命令來安裝Element UI：

vue add element

以上命令將自動安裝Element UI以及相應(yīng)的依賴庫。

在我們創(chuàng)建了一個(gè)新的Vue Element項(xiàng)目之后，我們可以看到如下目錄結(jié)構(gòu)：

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── App.vue
│   └── main.js
├── .gitignore
├── .npmrc
├── babel.config.js
├── package.json
└── README.md

其中，src/assets目錄用來存放Vue Element Template中用到的靜態(tài)資源，src/components目錄用來存放Vue Element Template中的組件，src/router目錄用來存放Vue Element Template的路由配置，src/App.vue用來存放整個(gè)項(xiàng)目的根組件，src/main.js用來作為整個(gè)項(xiàng)目的入口文件。

在使用Vue Element Template開發(fā)項(xiàng)目時(shí)，我們可以輕松地引入Element UI中的組件并進(jìn)行使用，例如我們可以在App.vue中添加一個(gè)el-button組件：

<template>
<el-button>Hello World!</el-button>
</template>
<script>
import 'element-ui/lib/theme-chalk/index.css'
import {Button} from 'element-ui'
export default {
name: 'App',
components: {
'el-button': Button
}
}
</script>

上述代碼中，我們通過import語句引入了element-ui中的Button組件，并將其命名為'el-button'進(jìn)行使用。

除了el-button組件，Element UI還提供了很多其他的組件可以供我們使用，例如el-table、el-form、el-dialog等。當(dāng)然，如果我們需要使用Element UI的其他主題，也可以在App.vue中更改element-ui的樣式主題：

<template>
<el-button>Hello World!</el-button>
</template>
<script>
import 'element-ui/lib/theme-green/icon.css'
import 'element-ui/lib/theme-green/index.css'
import {Button} from 'element-ui'
export default {
name: 'App',
components: {
'el-button': Button
}
}
</script>

以上代碼中，我們使用了element-ui的運(yùn)行所需的所有文件，以及樣式主題的更改。

總之，Vue Element Template可以輕易地使我們在Vue.js中使用Element UI組件，不僅擁有了Element UI的強(qiáng)大功能，還擁有了Vue.js框架本身的優(yōu)勢，讓我們輕松地進(jìn)行web應(yīng)用的開發(fā)。