一、前言
最近事情不多，准备花一周时间看看Vue的资料，也用Vue做一些小玩意。
这里浏览了一些相关资料打算直接使用Vite来构建自己的vue项目。
vite是什么？
vite是尤雨溪团队开发的新一代的前端构建工具，意图取代webpack，它的优点官网也有一些介绍：
二、环境搭建
1）使用vite创建项目
使用vite能很方便的创建一个项目，执行下图命令之一即可：
这里为使用的是yarn，所以执行的是yarn create vite 命令，执行后安装提示设置项目配置即可。
创建完成后，进入项目目录执行命令yarn 安装依赖包，然后使用yarn dev 启动项目:
启动成功后访问：http://localhost:5173/，看到下图即代表成功：
2）安装Element+
Element+（Element Plus）是一款热门不错的UI组件库，后面在我开发界面的时候离不开它。
执行安装命令:
yarn add element-plus
修改项目的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>
这时刷新网页可以看到如下界面：
再使用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>
页面效果
三、总结
Vue好像也有类似umi这样的应用框架叫做nuxt,这里为了想系统的学习一下Vue，自己搭建项目的每个基础组件和架构就没有使用。小伙伴们可以根据自己需要选择。
