首页 前端知识 vue3 Vite typeScript Arco Design搭建企业管理后台

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

2024-04-29 11:04:26 前端知识 前端哥 375 30 我要收藏

一、项目搭建

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6318.html
标签
评论
发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML5和CSS3新特性

2024-04-16 17:04:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!