Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目（三）—— 使用 vite 搭建项目

最新推荐文章于 2024-04-10 18:08:16 发布
最新推荐文章于 2024-04-10 18:08:16 发布
阅读量1.2k 收藏
点赞数
分类专栏： # Vue 3 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/123993273
版权

vite

概念

什么是vite？—— 是vue 极力推荐的新一代前端构建工具。

优势

  • 开发环境中，无需打包操作，可快速的冷启动
    ​众所周知，用vue-cli创建的vue项目或者其他基于webpack构建工具的项目在运行时都需要一个打包的过程，打包后作为静态资源放在devServer创建的服务里才能访问查看页面，而vite构建的项目是可以快速冷启动而不需要打包的操作。

  • 轻量快速的热重载（HMR）

  • 真正的按需编译，不再等待整个应用编译完成
    webpack打包是从入口文件开始，分析项目的路由，再而分析路由所应用到的模块整体一起打包，然后启动devServer，然后才可以在浏览器访问本地服务端口去查看工程界面。
    而vite则是用的是一个相反的思路进行开发环境的项目构建，首先，启动好服务然后分析入口文件，接下来，不会去打包所有路由所需依赖以及路由的组成模块，而是根据用户的访问去动态构建，因此vite构建的工程启动会快很多，就像是：按需编译，不用等待整个应用编译完成。

安装 vite

使用 NPM：

最低0.47元/天 解锁文章
＊且听风吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite+vue3+TypeScript 搭建项目基本框架_vite vue typescript
2401_84264429的博客
04-15 834
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Golang全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包
Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目（一）—— 使用 vue-cli 搭建项目
且听风吟的博客
04-07 1620
vue3 和 TypeScript 系统
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin :party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + vue3 + typescript ，提供最基础的框架模型，可以帮助你快速搭建企业级中后台产品原型。 PS：我是参考 开发维护的 ， 十分感谢大佬对开源社区做出的贡献 :) 前序准备 你需要在本地安装 和 。本项目技术栈基于 、、、 、 、axios 和 element-plus，提前了解和学习这些知识会对使用本项目有很大的帮助。 开发 # 克隆项目 git clone https://github.com/au1996/vue3-element-admin-ts.git # 进入项目目录 cd v
Vue 3 + TypeScript + Vite + pinia + router 脚手架
10-12
Vue 3 + TypeScript + Vite + pinia + router 脚手架 开箱即用
vue3+element+AntDesign(自动导入)+pina+vite+js+pnpm搭建项目框架
最新发布
qq_45585640的博客
04-10 977
这样，就搭建好了一个基于Vue 3的项目框架，使用了Element UI、Ant Design、Pina、Vite、JavaScript和pnpm。你可以根据需要进一步开发和配置项目。记得将上面的URL替换为你自己的图标库地址。
简述vue3(ts)+antdesignvue项目框架搭建基本步骤
缺点灵气儿的笔记本
07-30 4527
Vue 3（使用TypeScript）和Ant Design Vue项目框架搭建是指在Vue 3框架下，结合使用TypeScript编程语言和Ant Design Vue UI库，创建一个基本的项目结构和配置。Vue 3：Vue.js是一个流行的JavaScript框架，用于构建用户界面。Vue 3是Vue.js的最新版本，引入了一些改进和新功能，提供更好的性能和开发体验。TypeScript：TypeScript是JavaScript的一个超集，添加了静态类型检查和更多的面向对象编程特性。
vue 3.0 + ant-design-vue 2.0(测试版)搭建项目
jyy5806的博客
10-26 2301
最近项目需要，使用vue.3.0 使用 vue-cli 4.5.4 以及 antd 2.0 搭建一个项目，antd 2.0 目前处于测试版，我把过程总结一下。 antd 2.0 的地址 ：https://2x.antdv.com/components/radio-cn/ vue3.0 的地址： https://www.vue3js.cn/docs/zh/guide/migration/introduction.html#vue-cli vue-cli 得搭建： vue-cli 命令方法跟以前有点区别，vu
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
vue3+vite+ant-design-vue项目搭建
Chen__Hui的博客
07-04 1979
使用vite创建vue3项目 并引入ant-design-vue和router
vue3+ts+webpack 搭建+环境配置+路由
qq_38394175的博客
05-18 3664
一、搭建（vue.js+webpack的项目） 1.vite //vue cli 版本在 4.5.0 以上--我用的5.0.4 npm install -g @vue/cli vue -V //创建项目 vue create 项目名字 //安装依赖运行项目 cd 项目名 //注意node版本，我用的v16.14.2 npm install 2.webpack //vue cli 版本在 4.5.0 以上--我用的5.0.4 npm install -g @vue/cli vue -V //创建项目
vite2 + vue3 + antd3.2.2项目创建
weixin_38324739的博客
04-28 324
一、所需环境 npm = 6.13.4, node > 12 二、步骤 1、npm init @vitejs/app 2、npm install 3、vite2没有dev，所有npm run dev无效【但是可以在ide中运行】 也可以在vite.config.js中配置 export default defineConfig({ plugins: [vue()], define: { 'process.env': {} }, }] 4、npm inst
Vue3+TypeScript+Vite+Vuex4+vue-router实现电商购物网站.zip
03-03
Vue3+TypeScript+Vite+Vuex4+vue-router实现电商购物网站.zip
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
vue3.x+vite+ts+vue-router@4.x 路由使用demo，可供学习使用，也可在此基础上写项目
vite-vue-template:vite2 + vue3 + vuex + vue-router +打字稿+ ant-design-vue +模拟
03-20
vite2 + vue3 + vuex + vue-router +打字稿+ ant-design-vue +模拟 推荐的IDE设置 + 。确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。要获得...
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass
局外人LZ的博客
03-04 1113
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
vue3+antd——项目搭建初始化配置——技能提升
yehaocheng520的博客
07-18 1000
vue3+antd——项目搭建初始化配置——技能提升
使用 Vue3 + Pinia + Ant Design Vue3 搭建后台管理系统
11-23 1193
Vue3 + Antd 搭建前端项目
vue3+ts+ant-design
m0_55301924的博客
07-10 249
创建一个vue3+ts+ant-design的项目,并附上报错和解决办法
一、初始化项目-vue3+antdv 搭建权限管理系统
qq_35466131的博客
10-15 375
【代码】一、初始化项目-vue3+antdv 搭建权限管理系统。
vue3+vite+ts这个项目 加入router axios vuex
04-07
1. 安装路由、axios和vuex ```bash npm install vue-router axios vuex --save ``` 2. 创建路由 在src/router目录下创建index.ts文件，并添加以下内容： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import Home from '@/views/Home.vue' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 3. 创建Vuex store 在src/store目录下创建index.ts文件，并添加以下内容： ```typescript import { createStore } from 'vuex' export default createStore({ state: {}, mutations: {}, actions: {}, modules: {} }) ``` 4. 在main.ts中使用路由、axios和vuex 在main.ts文件中添加以下内容： ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios = axios app.use(router) app.use(store) app.mount('#app') ``` 5. 在组件中使用路由、axios和vuex 在组件中可以直接使用路由、axios和vuex，例如： ```typescript import { defineComponent } from 'vue' import { useStore } from 'vuex' export default defineComponent({ setup() { const store = useStore() const fetchData = async () => { const res = await axios.get('/api/data') store.dispatch('setData', res.data) } return { fetchData } } }) ``` ```typescript import { defineComponent } from 'vue' import { useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const goToPage = (pageName: string) => { router.push({ name: pageName }) } return { goToPage } } }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值