vue3+Vite+typeScript+Arco Design搭建企业管理后台

一、项目搭建

1、创建项目前请先确保vue-cli在4.0版本及以上

2、创建项目

当然如果选择简单模式记得先查看npm版本

简单模式：

您还可以通过其他命令行选项直接指定项目名称和要使用的模板。

vite官网的这句话，我就简单粗暴的理解成简单的搭建模式 ，命令如下，当然因为npm版本不同，命令略有差异，建议您先查看npm版本

npm -v

# npm 6.x
npm init @vitejs/app [项目名] --template vue-ts
# npm 7+（需要额外的双横线）
npm init @vitejs/app [项目名] -- --template vue-ts

详细模式：

npm init @vitejs/app
? Project name: » vite-project[项目名]
√ Project name: ... [项目名]
? Package name: » [项目名]
√ Package name: ... [项目名]
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
 >  vue
    react
    preact
    lit
    svelte
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts
√ Select a variant: » vue-ts
Scaffolding project in [项目路径/项目名]...
 
Done. Now run:
 
  cd arcoDemo
  npm install
  npm run dev

1. 运行最后三行命令，启动项目

Arco Design是字节跳动出品的企业级UI组件

官网地：https://arco.design/

分了vue和React版本，这里我们集成的vue版本

Vue 版本

vue >= 3.2.0

注意：由于 Vue3 不再支持 IE 浏览器环境，ArcoVue 也不再支持 IE 浏览器环境。

安装

# npm
npm install --save-dev @arco-design/web-vue
# yarn
yarn add --dev @arco-design/web-vue

完整引入

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

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

搭建后样式，这是一个基础的简单框架，请求使用的axios,状态管理vuex（也可以换成pinia），已封装好，拿来既可以使用

项目地址：https://gitee.com/zhengzaoxin/vue3-admin

另一个项目，纯基础框架，没有继承其他内容，状态管理使用的pinia

https://gitee.com/zhengzaoxin/vite-template