一、Vue3+Ts+Vite+AntdUI构建后台基础模板——构建初始项目Vue3+Ts+Vite+AntdUI构建后台

（一）新建Vue3+Ts+Vite项目

1. 进入需要新建项目的目录，打开电脑的终端

# 输入命令：
# node.js 版本 >= 12.0.0。
npm init @vitejs/app

2. 输入项目名称：

 Project name: vue3-admin

3. 选择vue框架，然后选择vue-ts：

 Select a framework: 
 vue-ts

4. 安装项目依赖

npm i

5. 去除一些系统生成的示例文件和目录

删除components目录下的HelloWorld.vue
修改src目录下的App.vue

//@/App.vue

<template>
  <h1>APP</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  components: {}
})
</script>

<style>
</style>

6. 完成项目初始化

# 运行项目
npm run dev

# 打包项目
npm run build

# 本地预览打包后的项目
npm run serve

（二）基础依赖

(1) 路由vue-router

1. 安装vue-router 4

npm install vue-router@4

2. 创建首页

新建views目录
在views目录下新建Home目录
在views/Home目录下新建index.vue

3. 新建目录及文件

// @/router/index.ts
import { createRouter,createWebHashHistory} from "vue-router";

const routes = [
  {
    path: "/",
    name: "home",
    component:  () => import('../views/Home/index.vue')
  },
]

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

export default router;

// @/main.ts引入
···
import router from './router'

const app = createApp(App)
···
app.use(router)
···
app.mount('#app')

3. 使用后面篇幅介绍

(2) 状态管理vuex

1. 安装vuex 4

npm install vuex@next --save

2. 新建store目录以及index.ts文件

// @/store/index.ts
import { createStore } from 'vuex'

export default Vuex.createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

// @/main.ts引入
···
import store from './store'

const app = createApp(App)
···
app.use(store);
···
app.mount('#app')

使用后面篇幅介绍

(3) 请求库vue-axios

1. 安装vue-axios

npm install axios

2. 封装和使用后面篇幅介绍

(4) 安装Less

1. 执行命令

npm install --save less less-loader

2. 使用Less

// *.vue
<style lang="less" scoped></style>

(5) 组件库Ant Design Vue

1. 安装Ant Design Vue 2

 npm i --save ant-design-vue@next

2. 引入

// @/main.ts引入
···
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
···
app.use(Antd)
···
app.mount('#app')

(6) 视频演示及源码

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网