# vue3-vite-manage

**Repository Path**: windstarry/vue3-vite-manage

## Basic Information

- **Project Name**: vue3-vite-manage
- **Description**: 学习用vue3搭建管理后台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-26
- **Last Updated**: 2022-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, 后台管理

## README

# 学习使用 vue3 和 Vite 构建后台管理系统

## 一、搭建脚手架

Vite 官方中文地址：[开始 | Vite 官方中文文档 (vitejs.dev)](https://cn.vitejs.dev/guide/)

使用 NPM:

```
$ npm create vite@latest
```

使用 Yarn:

```
$ yarn create vite
```

还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板

npm 6.x

```
npm create vite@latest my-vue-app --template vue
```

npm 7+, extra double-dash is needed

```
npm create vite@latest my-vue-app -- --template vue
```

yarn

```
yarn create vite my-vue-app --template vue
```

项目构建好后，依次运行

```
cd my-vue-app
yarn
yarn dev
```

点击链接http://127.0.0.1:5173/ 出现图片表示项目创建成功

[![1666759114464](image/README/1666759114464.png)]()

## 二、安装依赖，修改配置

## 1、安装 element-plus

```
# Yarn
yarn add element-plus -S
```

使用按需导入

需要安装 `unplugin-vue-components` 和 `unplugin-auto-import`这两款插件

```
npm install -D unplugin-vue-components unplugin-auto-import
```

然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中

```
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})
```

## 2、安装 vue-route

```
yarn add vue-router -S
```