一、项目搭建
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
运行最后三行命令,启动项目
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