使用 vue-cli 创建一个Vue3项目
- 首先你看下你电脑上vue-cli脚手架的版本
vue -V
------
@vue/cli 4.5.15 // 版本号
vue-cli版本保证在4.5.13及其以上就行，
如果你需要升级版本，那么可以通过以下指令进行升级：
npm update -g @vue/cli
- 创建项目
// 利用 vue-cli 创建项目
vue create admin-vue3
之后根据自己的需求一直下一步就行了
@vue/cli 在帮助我们创建项目的同时，也生成了很多无用的代码，那么这一小节我们需要去除掉这些无用的代码。
具体如下所示：
-
App.vue初始化代码如下：
<template>
<router-view />
</template>
<style lang="scss"></style>
删除
views文件夹下的所有.vue文件删除
components文件夹下的所有.vue文件router/index.js中初始化代码如下：
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
接下来，我们可以通过以下两个指令来运行你的项目：
cd 项目目录
npm run serve
执行成功之后，项目即可运行！
-
浏览器中访问你的应用，得到如下页面即可：
image.png
UI组件库我们使用Element-plus
- 安装Element-plus
npm install element-plus --save
element-plus 官方文档：https://doc-archive.element-plus.org/#/zh-CN/component/installation
