Vue环境搭建

一、前言

最近事情不多，准备花一周时间看看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
1

修改项目的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')
1
2
3
4
5
6
7
8
9

---

然后添加一个element组件库的按钮到main.vue中，完整代码如下：

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>
1
2
3
4
5

---

这时刷新网页可以看到如下界面：

---

再使用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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

---

页面效果

---

三、总结

Vue好像也有类似umi这样的应用框架叫做nuxt,这里为了想系统的学习一下Vue，自己搭建项目的每个基础组件和架构就没有使用。小伙伴们可以根据自己需要选择。