使用vite + vue3 + typescript + vant 搭个应用【1】

最新推荐文章于 2024-06-28 22:18:56 发布
最新推荐文章于 2024-06-28 22:18:56 发布
阅读量887 收藏 1
点赞数
分类专栏： 用vue3与node搭建一个应用 文章标签： vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pz3305636904/article/details/121205194
版权
本文介绍了使用vite、vue3、typescript和vant搭建应用程序的步骤，包括环境配置、项目安装、依赖引入和项目结构的展示。
摘要由CSDN通过智能技术生成

使用vite + vue3 + typescript + vant 搭个应用【1】

vue3 和 ts必定是大趋势，为了了解一下，上手来试试

环境

  • node --version v14.16.1，v14以上都能使用

安装项目

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-<
最低0.47元/天 解锁文章
笑笑的微笑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3-vite-ts-Vant：vue3 + vite + ts + Vant + vuex +路由器
03-04
vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
vue3+typescript+vite+vant搭建一个移动端项目
W_Purplegrape的博客
06-07 1893
本文主要讲解vue3移动端项目如何搭建，在构建项目前请确保已安装node、npm工具，此项目构建主要集成：axios、vant、typescript、vite和vue3，其中还会介绍到如何动态适配尺寸等功能
Vite脚手架+Vant组件库初始化前端项目
最新发布
m0_73966521的博客
06-28 604
Vite 可以被视为一个优化了的构建工具，特别针对 Vue 3 的开发。在前端开发中，脚手架（Scaffold）是指一个用于快速搭建项目基础结构的工具或模板。脚手架包含了项目所需的基本文件结构、配置文件、依赖管理等内容，使开发者能够更快速地开始项目开发，而不必从头开始搭建整个项目结构。总结起来就是，我们准备开始搭建项目的时候，不需要自己从0到1全部自己写，我们可以去网上拉写好的脚手架下来。新建一个项目文件夹，并打开cmd（在项目目录中直接打开），运行npm create vite。
Vue 3 + Typescript + Vite + vant3 搭建移动端通用架子
dogface博客
05-25 918
// import { defineConfig } from 'vite' // import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ // export default defineConfig({ // plugins: [vue()] // }) import { defineConfig, loadEnv} from 'vite' import vue from '@vitejs/plugin-vue' co.
vite+vue3+ts+vant 移动端
Lycoris_Red的博客
02-15 546
1.创建vite项目 通过npm初始化 npm init vite@latest 通过Yarn yarn create vite 或者自定义模板 # npm 6.x npm init vite@latest my-vue-app --template vue-ts # npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue-ts # yarn yarn create vite my-vue-app --t
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript
02-08
在使用该架构前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite、vue3和typescript，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配等功能 vue3：...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript
02-18
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 vue3：...
Vue3+Vite+Ts+Pinia+....一个快速开发vue3的模板框架，快速搭建前台应用.zip
02-08
综上所述，这个压缩包提供了一个基于Vue3、Vite、Typescript和Pinia的前端模板，适用于开发高效、稳定的企业级应用。通过这个框架，开发者可以快速启动新项目，同时享受到现代化前端工具带来的便利和性能提升。使用...
vue3移动端项目构建，vue3+vant+vite+axios+pinia+sass
局外人LZ的博客
02-27 4695
本文只是大致讲了下vue3移动端项目搭建，具体的细节还是需要根据自己项目的需要进行调整。路由只封装了navigateTo、navigateBack，可以根据微信小程序路由api的逻辑https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 封装switchTab、reLaunch、redirectTo，如果有更好的方法可以忽略该路由封装，个人觉得小程序路由做的挺好。路径别名可配可不配，根据自己喜好就行。
vue3_vant_ts_template:基于vue3 + vant UI + TypeScript的移动端项目模板
05-11
vue3_vant_ts_template Vant配置 安装 npm i vant@next -S 使用 ts-import-plugin 实现vant按需导入 当本地找不到 webpack-merge 和 ts-import-plugin 时，需要分别安装 npm i webpack-merge npm i ts-import-plugin vue.config.js 中 /* eslint-disable @typescript-eslint/no-var-requires */ const merge = require('webpack-merge') const tsImportPluginFactory = require('ts-import-plugin') module.exports = { chainWebpack: config => { config
vue3.0 + vite+ vant3.0
云淡风轻的博客
11-19 6049
由于项目都是vue框架的spa页面，然后项目需要一个活动页和微信的分享，这样用vue框架很累赘；以前我是直接用h5；刚好最近vue3.0出来了，然后撸一个活动页面练练手。这个过程还是蛮曲折的；
vue3+vite3+vant搭建移动端简易模版
发果叁
09-30 3903
vue3.x相关的生态已经在不断的完善中，相应的UI/路由/pinia等都已成熟，新的项目也在考虑使用新版本开发了，开一个帖子记录一下搭建移动端简易模版的过程，方便以后回顾。
基于vue3+typescript+vite二次封装axios总结（已经在实际项目上线）
一个网络搬砖的斜杠青年
06-24 2342
该文章api由 UomgAPI平台 提供；技术在进步；我也也要跟上技术的步伐，自己总结了下二次封装axios的经验；支持ts（已经在实际项目上线）通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代. 这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求......
vue3.0 vite+typescript+vant ui+eslint+stylelint 项目搭建博客系统 NProgress
muge1161105403的博客
08-02 1090
1.使用vite创建项目 yarn create vite 2.修改配置文件 =====>package.json //可以直接替换成我的 { "name": "blog_h5_vue3.0_vite", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "serve": "vite preview" },
Vue3+Vite3+Vant初体验及踩过的一些坑
Kidaze的博客
11-15 1677
真正使用到了ref()和reactive()，觉得reactive真的是十分方便，父子组件的传值props方式的话、也没什么大变化、、 总体来说vue3语法上感觉比vue2更精简方便好用。还有就是在模板自动生成的vue里面默认是这种格式，在里面cv vant的实例代码会报错，需要去掉script标签中的setup。项目创建起来后常规的npm i、npm run dev都没问题，太久没写vue都忘了路由怎么写了，搜了一下发现需要先。再在需要使用组件的页面引入。
vue3+vant+vite移动端H5前端项目
qq_24229141的博客
01-08 1358
vue3+vant+vite
搭建vue3+vite+vant移动端项目
m0_73591138的博客
12-29 1436
如何使用前端技术搭建一个移动端项目。我们将使用Vue3作为前端框架，Vite作为构建工具，以及Vant作为移动端UI组件库。
vue3+vite+ts+vant
10-14
问题：请问在使用vue3+vite+ts+vant进行开发时，如何引入vant组件库？ 回答：在使用vue3+vite+ts进行开发时，可以通过以下步骤引入vant组件库： 1. 安装vant组件库：`npm install vant -S` 2. 在main.ts中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值