使用 vite + vue3 的demo项目，使用setup语法糖，vuex4+, vue-router4+ eslint less typescript

最新推荐文章于 2024-07-06 13:16:58 发布
最新推荐文章于 2024-07-06 13:16:58 发布
阅读量621 收藏
点赞数 1
分类专栏： javascript typescript 文章标签： vue.js 前端 typescript vue3 vite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxiaomu/article/details/121397987
版权

笔者最近鼓捣了一个 vite + vue3.2 的demo项目，使用了setup语法糖，vuex4+, vue-router4+ eslint less typescript

分享一下 vite & vue3.2 demo

Vue 3.2 + Vite

Demo project using vite + vue3, using setup syntactic sugar, demo project of vuex4+, vue-router4+

Technology Stack

  1. vue3.2+, use setup script
  2. vite
  3. vuex4+
  4. vue-router4+
  5. less
  6. typescript
  7. eslint

dev

git clone https://github.com/theajack/vite-vue3-ts-eslint.git

cd vite-vue3-ts-eslint
npm install

npm run dev

build

npm run build

Precautions!important

  1. vscode install eslint plugin
  2. vscode disable vetur plugin
  3. vscode install volar plugin
tackchen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+vite+JS写一个todolist 的demo
Liangwan0315的博客
03-09 291
我们首先定义了应用程序的模板。模板中包含一个输入框、一个待办事项列表和一个显示剩余任务数量的段落。，以便在用户按下回车键或更改复选框状态时执行相应的操作。是一个数组，它包含应用程序中所有的待办事项。在Vue中，我们可以使用指令将模板与数据绑定起来。在这个例子中，我们使用了。在Vue中，组件可以有自己的状态和方法。在这个例子中，我们定义了一个。最后，在项目根目录下打开命令行终端，运行命令启动Vite服务。变量双向绑定，以便在用户输入时动态更新输入框的值。是一个字符串，它表示当前正在输入的待办事项。
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
通过这个示例项目，你可以了解到如何在 Vue3.x、Vite 和 TypeScript 的环境中设置和使用 Vue Router 4.x，这将对你的前端开发技能有极大的提升。同时，实践项目也能帮助你更好地理解和掌握这些技术的实战应用。
Vite-Vue setup ＜script setup＞
Smokefishe的博客
07-05 387
废话不多说，直接上最关键的 首先要使用此语法糖，必须是基于Vite创建的Vue3.0项目，原本的Vue cil 创建的应该是不支持的！！！ <script setup> <script> props传参 import { defineProps } from "vue"; let props = defineProps({ msg: { type: String, default: '' }, }); 父子组件通信 import { define
vite+vue3整合less教程
最新发布
Python私教
07-06 626
2、定义全局css变量文件 src/assets/css/global.less。4、配置vite vite.config.js。3、引入less src/main.js。5、使用 src/App.vue。
使用setup语法糖,eslint检查报错
ATM_09的博客
08-12 1120
setup 语法糖 eslint报错
vue3 + vite + ts + setup , 第一练 如何使用setup ts语法糖
csl125的博客
04-18 1222
<template> <div v-html="message"> </div> <h1 class="h2-h" v-if="flag">布尔</h1> <button @click="isShowFun">click</button> <p :style="'color:' + ost.pColor"> <span>{{ ost.pNum }}</span&g.
Vite中预处理器(如less)的配置
weixin_46769087的博客
12-16 7187
通过上一章节，我们学习了vite中如何对css行为进行配置，同时知道了它的第一个配置项css.modules。传送门：https://juejin.cn/post/7175366648659411000现在，我们来深入学习它的第二个可配置项-预处理器配置项。顾名思义，这个选项是用来配置less、scss、stylus等预处理器的。现在我们通过配置less默认选项，详细了解一下preprocessorOptions的配置用法。
Vue3+TypeScript+Vite+Vuex4+vue-router实现电商购物网站.zip
03-03
Vue3+TypeScript+Vite+Vuex4+vue-router是一个现代前端开发的组合，用于构建功能丰富的电商购物网站。这个项目使用了最新的Vue.js框架版本，结合了TypeScript的静态类型检查，Vite的快速开发环境，Vuex4的状态管理，...
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 + ...
使用Vite+Vue3+Vue-router+TypeScript+Element-plus+Mock开发的后台管理系统.zip
06-15
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
vue3-vite-demo
03-09
Vue3学习 根据部署
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
使用vite npm install ( or `yarn` ) npm run dev ( or `yarn dev` )
Vue3 + Vite 使用 Less 配置
RR_chen的博客
08-12 7267
- 安装 less `npm install less -D` （Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 less） - 在 vite.config.js 中加入：
在vite+vue3项目中配置使用css预处理器（less/sass）以及路径别名
jieyucx的博客
06-25 6202
vite已经将这些预处理器的loader内置了，我们不用再像在webpack项目中那样，需要下载和配置一堆相关的loader，我们只需要下载less，sass依赖，就能直接在项目中使用啦如图，下载之后我们在项目中style添加lang属性为less，就可以是用less语法啦运行效果如图：还有一种引入方式，import导入外部文件如图，我们新建一个style文件夹，里面新建一个app.less文件，然后再App.vue中使用import导入即可。
在Vue3 + Vite项目中使用less
码农键盘上的梦
02-21 1260
这样就完成了less的配置。在Vue3 + Vite项目中使用less，需要安装。首先，在项目根目录下执行以下命令安装。来指定使用less语法。标签中编写less样式。
vue3_03_vuex4
田兴的博客
02-24 799
什么是状态管理 在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。 在前面我们是如何管理自己的状态呢？ 在Vue开发中，我们使用组件化的开发方式； 而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state； 在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View； 在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行
Vue 3中引入SCSS和LESS依赖的教程指南
曲江涛的博客
05-17 8061
在Vue 3项目中引入SCSS和LESS是一种提高样式管理和可维护性的有效方式。通过安装依赖、配置构建工具和使用样式文件，我们可以轻松地集成SCSS和LESS，并享受它们提供的变量、嵌套和导入功能。参考推荐的教程、文档和GitHub项目，可以更深入地学习和掌握SCSS和LESS在Vue 3中的应用。避免常见的错误配置和路径问题，确保顺利使用SCSS和LESS来优化您的Vue 3项目的样式。希望本文对您理解和使用Vue 3中引入SCSS和LESS的过程有所帮助！
vite + vue3 + ts + pinia + vue-router + axios + scss + 自动导入api
08-09
对于使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的设置，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Node.js，并且版本大于等于 12.0.0。 2. 创建一个新的 Vue 项目，可以使用 Vue CLI 或者手动创建一个空文件夹。 3. 在项目根目录下，打开终端并执行以下命令安装 Vite： ```bash npm init vite@latest ``` 按照提示选择你的项目配置，包括选择 Vue 3、TypeScript 和其他选项。 4. 进入项目目录并安装依赖： ```bash cd your-project-name npm install ``` 5. 安装 Pinia 插件： ```bash npm install pinia ``` 6. 创建一个 `src/store` 目录，并在其中创建 `index.ts` 文件，用于定义和导出你的 Pinia store。 ```typescript // src/store/index.ts import { createPinia } from 'pinia' export const store = createPinia() // 可以在这里定义你的 store 模块 ``` 7. 在项目根目录下创建 `src/api` 目录，用于存放 API 请求相关的文件。 8. 在 `src/api` 目录下创建一个 `index.ts` 文件，用于自动导入所有 API 文件。 ```typescript // src/api/index.ts const modules = import.meta.globEager('./*.ts') const apis: any = {} for (const path in modules) { if (path !== './index.ts') { const moduleName = path.replace(/^.\/|\.ts$/g, '') apis[moduleName] = modules[path].default } } export default apis ``` 这样，你就可以在 `src/api` 目录下创建各种 API 请求的文件，例如 `user.ts`： ```typescript // src/api/user.ts import axios from 'axios' export function getUser(id: number) { return axios.get(`/api/user/${id}`) } ``` 然后，在你的组件中使用自动导入的 API： ```typescript import { defineComponent, ref } from 'vue' import { useUserStore } from '@/store' import apis from '@/api' export default defineComponent({ setup() { const userStore = useUserStore() const userId = ref(1) const fetchUser = async () => { const response = await apis.user.getUser(userId.value) userStore.setUser(response.data) } return { userId, fetchUser, } }, }) ``` 以上就是使用 Vite + Vue3 + TypeScript + Pinia + Vue Router + Axios + SCSS 并自动导入 API 的基本设置。你可以根据自己的需求进一步配置和扩展。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值