使用 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 在帮助我们创建项目的同时，也生成了很多无用的代码，那么这一小节我们需要去除掉这些无用的代码。

具体如下所示：

1. App.vue 初始化代码如下：

<template>
  <router-view />
</template>

<style lang="scss"></style>

2. 删除 views 文件夹下的所有 .vue 文件

3. 删除 components 文件夹下的所有 .vue 文件

4. router/index.js 中初始化代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = []

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

接下来，我们可以通过以下两个指令来运行你的项目：

cd 项目目录
npm run serve

执行成功之后，项目即可运行！

5. 浏览器中访问你的应用，得到如下页面即可：

   
   
   image.png

UI组件库我们使用Element-plus

• 安装Element-plus

 npm install element-plus --save

element-plus 官方文档：https://doc-archive.element-plus.org/#/zh-CN/component/installation

这一节，我们创建了一个全新的Vue3项目，删除了无用的代码，引入了UI组件库Element-plus，下一节，我们开始搭建登录页面，一起加油吧！