一、前言

最近事情不多，準(zhǔn)備花一周時間看看Vue的資料，也用Vue做一些小玩意。
這里瀏覽了一些相關(guān)資料打算直接使用Vite來構(gòu)建自己的vue項(xiàng)目。

vite是什么？

vite是尤雨溪團(tuán)隊(duì)開發(fā)的新一代的前端構(gòu)建工具，意圖取代webpack，它的優(yōu)點(diǎn)官網(wǎng)也有一些介紹：

文章目錄

二、環(huán)境搭建

1）使用vite創(chuàng)建項(xiàng)目

使用vite能很方便的創(chuàng)建一個項(xiàng)目，執(zhí)行下圖命令之一即可：

這里為使用的是yarn，所以執(zhí)行的是yarn create vite 命令，執(zhí)行后安裝提示設(shè)置項(xiàng)目配置即可。

創(chuàng)建完成后，進(jìn)入項(xiàng)目目錄執(zhí)行命令yarn 安裝依賴包，然后使用yarn dev 啟動項(xiàng)目:

啟動成功后訪問：http://localhost:5173/，看到下圖即代表成功：

2）安裝Element+

Element+（Element Plus）是一款熱門不錯的UI組件庫，后面在我開發(fā)界面的時候離不開它。

執(zhí)行安裝命令:

yarn add element-plus

修改項(xiàng)目的src/main.ts文件為下面的代碼：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

然后添加一個element組件庫的按鈕到main.vue中，完整代碼如下：

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

這時刷新網(wǎng)頁可以看到如下界面：

再使用Element的Table模板代碼：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>