-
2022-02-13 01:00:11
.editorconfig
root = true [*] charset = utf-8 # end_of_line = lf indent_size = 2 # 缩进 indent_style = space insert_final_newline = true ij_html_quote_style = double max_line_length = 120 tab_width = 2 trim_trailing_whitespace = true
.prettierrc.json
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "vueIndentScriptAndStyle": true, "singleQuote": true, "quoteProps": "as-needed", "bracketSpacing": true, "trailingComma": "es5", "jsxBracketSameLine": true, "jsxSingleQuote": false, "arrowParens": "always", "insertPragma": false, "requirePragma": false, "proseWrap": "never", "htmlWhitespaceSensitivity": "ignore", "endOfLine": "auto", "rangeStart": 0 }
.eslintrc.json
{ "root": true, "env": { "es2021": true, "node": true, "browser": true }, "globals": { "node": true }, "extends": [ // "plugin:vue/essential", /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */ // "plugin:@typescript-eslint/recommended", // "eslint:recommended", "plugin:vue/vue3-recommended", /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */ "plugin:prettier/recommended" ], "parser": "vue-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser", "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["@typescript-eslint"], "ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"], "rules": { "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/no-var-requires": "off", "@typescript-eslint/consistent-type-imports": "error", "@typescript-eslint/explicit-module-boundary-types": "off", "vue/singleline-html-element-content-newline": "off", "vue/multiline-html-element-content-newline": "off", "vue/no-v-html": "off", // "space-before-blocks": "warn", // "space-before-function-paren": "error", // "space-in-parens": "warn", // "no-whitespace-before-property": "off", /** * Having a semicolon helps the optimizer interpret your code correctly. * This avoids rare errors in optimized code. * @see https://twitter.com/alex_kozack/status/1364210394328408066 */ "semi": ["error", "always"] /** * This will make the history of changes in the hit a little cleaner */ // "comma-dangle": ["warn", "always-multiline"], /** * Just for beauty */ // "quotes": ["warn", "single"] } }
配置别名@,以及IDE自动识别
- 安装依赖
# 最好与当前版本一致,这里是最新版本 pnpm add @types/node
// vite-config-ts import * as path from 'path'; const resolve = (p: string) => { return path.resolve(__dirname, p); }; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': resolve('./src'), }, }, plugins: [ vue() ], });
- 自动识别
// tsconfig.json "compilerOptions": { "baseUrl": ".", "paths": { "@/*":["./src/*"] } },
更多相关内容 -
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
2021-05-02 08:57:22Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了,想试试新功能 ... -
Vue3 vite配置跨域请求
2022-03-19 15:08:43请求一些api接口可能遇到如下问题: 原因可能是该api不支持跨域请求 ...1.在项目下新建vite.config.js,如下图: vite.config.js: module.exports = { proxy:{ '/api':{ target:'https://pvp.qq.com.请求一些api接口可能遇到如下问题:
原因可能是该api不支持跨域请求
这里以王者荣耀的英雄介绍api(https://pvp.qq.com/web201605/js/herolist.json)为例,来解决问题
流程:
1.在项目下新建vite.config.js,如下图:
vite.config.js:
module.exports = { proxy:{ '/api':{ target:'https://pvp.qq.com/', changeOrigin:true, // 允许跨域 rewrite:path => path.replace(/^\/api/,'') } } }
2.重启服务 :
此时,在浏览器的开发者工具中已经能够看到获取到api数据 :
为了让获取的数据展示在页面上,还需如下操作:
1.在工程名>src中新建store文件夹,并在该文件夹中新建index.js,用于存储获取的数据如下:
index.js:
import {reactive} from "vue"; const store = { state:reactive({ duanziList:[], }), setDzList(list){ this.state.duanziList = list }, } export default store;
2.修改App.vue的代码如下:
<template> <div v-for="(item,i) in store.state.duanziList" :key="i"> <p>{{item.cname}}===>{{item.title}}</p> </div> </template> <script> import store from './store/index.js' import axios from 'axios' export default { name: 'App', provide:{ store }, setup(){ let api = '/api/web201605/js/herolist.json'; // // 方式1 // fetch(api).then(res=>res.json()).then(result=>{ // store.setDzList(result.result) // // console.log(result) // }) // 方式2 axios.get(api).then((result)=>{ // console.log(result) store.setDzList(result.data) }) return { store } } } </script>
最终效果:
-
vite2 + vue3构建多页应用-源码demo
2021-10-15 17:18:15Vite2-多页 使用vite2 + vue3构建多页应用-源码 -
vue3 vite 配置代理解决跨域
2021-09-29 14:44:00server: { proxy: { ‘/api’: { target: ‘http://localhost:3003’, changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ‘’), }, }, },
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:3003’,
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, ‘’),
},
},
}, -
vue3-electron-vite-ts:使用了vue3、electron、vite、ts
2021-05-08 21:04:24默认情况下,该接口使用Vue框架,但是您可以轻松使用任何其他框架,例如React , Preact , Angular , Svelte或其他任何框架。 Vite与框架无关 支持 此模板由维护。 你可以 继续开发此模板。 如果您有想法,问题... -
vue3+vite2+ts+vant3 项目demo
2022-04-16 11:20:06此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443;感谢大佬 -
vue3 vite使用element-plus
2022-03-15 09:38:46$ npm install element-plus --save 按需引入 npm install -D unplugin-vue-components unplugin-auto-import ...import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver.$ npm install element-plus --save
按需引入
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }
后面直接使用就可以了 我这个是 element 跟 vant 混用的 感觉还不错 按需引入 各位也可以尝试下
-
electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
2021-05-17 05:13:08Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ... -
vue3-vite-ts-Vant:vue3 + vite + ts + Vant + vuex +路由器
2021-03-04 04:51:12vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览 -
Vue3 Vite+Mock数据+axios二次分装
2021-12-20 18:32:39首先我们要安装vue3 vite 搭建项目 npm init @vitejs/app webapp cnpm init @vitejs/app webapp yarn create @vitejs/app webapp 项目结构 然后去安装node包 yarn 启动项目 yarn dev 这个时候就已经搭建成功 接下来... -
Vue3 Vite项目创建
2020-10-29 19:15:59利用 Vite 创建 Vue3 项目 // projectName 项目名称 create-vite-app projectName 安装依赖运行项目 cd projectName //进入工程项目文件夹 npm install //安装项目依赖 npm run dev //运行项目 ... -
Vue3 vite.config.js环境变量配置(自己记录)
2022-05-30 16:16:281. 在根目录新建两个文件(分别对应生产和开发环境) ...VUE_APP_BASE_API = xxx2 默认vite只会暴露VITE开头变量。此时可以在其他文件通过import.meta.env.变量名获取环境变量 2. vite.config.js 最主要的是: -
vue3 vite.config.ts 基础配置,持续更新
2021-05-18 15:42:56import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; export default defineConfig({ plugins: [vue()], base: "./", resolve: { alias: { // 如果报错__... -
electron-vite2-vue3-typescript-Test
2021-04-22 18:51:32Vue 3 +打字稿+ Vite 该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ! 如果使用[removed] 是当前处于RFC... -
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
2022-04-10 05:33:06Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中 -
vue3 vite vscode断点调试
2022-06-14 11:38:24vue3 vite vscode断点调试 -
Vue3 Vite 使用 tailwindcss & element-plus & iconify
2022-02-13 13:57:11安装和使用 tailwindcss ...# vue-3-vite 中安装 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # 初始化,新增 tailwind.config.js and postcss.config.js npx tailwind -
vue3 vite创建项目全局注册封装组件
2021-12-12 19:26:05//引入封装组件、这里普通import xxx会报错、最好带上后缀.js、这里用的是vite创建项目、@/引入好像不行 import * as myComponents from "./components/index.js"; const app = createApp(App) //全局遍历注册 ... -
vue3 vite.config.ts 配置
2021-10-26 13:52:49import vue from '@vitejs/plugin-vue' import styleImport from 'vite-plugin-style-import' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ base: './',//打包后... -
VUE3 vite获取.env.development配置环境
2021-11-30 15:54:57vue3无法获取.env.development问题 -
vue3 vite 怎么动态引用图片
2021-07-23 20:09:202、使用vite的import.meta.glob或import.meta.globEager,两者的区别是前者懒加载资源,后者直接引入。 <img :src="getSrc('Contact_us')" alt=""> getSrc(name) { const path = `./../assets/images/... -
上手体验Vue3 Vite的魅力(“快”的艺术),有了它,你还会用webpack吗?
2021-11-03 19:35:27Vite(法语单词,“快” 的意思)是一种新型的前端构建工具,最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板。目前来说,Vue 使用的是 vue-cli 脚手架,React 一般... -
使用Vite,Vue 3,Tailwind CSS和TypeScript构建的仪表板入门模板。-Vue.js开发
2021-05-27 21:57:45使用Vite,Vue 3,Tailwind CSS和TypeScript构建的仪表板入门模板。 V-Dashboard使用Vite,Vue 3,Tailwind CSS和TypeScript构建的Dashboard入门模板。 从https://github.com/tailwindcomponents/dashboard复制并... -
vue3 vite与cli方式创建项目
2022-02-28 23:50:27vue3创建项目一 vite方式创建1.1 vite创建命令1.2 填写项目名称1.3 选择架构框架1.4 选择vue版本1.5 项目结构1.6 修改vite配置文件二 cli方式创建vue3项目2.1 cli创建命令2.2 选择模板多节点报错问题解决方案 ... -
vite-template-test:ElementPlus + Vue3 + Vite + Typescipt管理模板。 仍在努力。
2021-03-03 17:01:36项目名 项目名称和描述 “完美的” README模板 一个“完美的” README模板去快速开始你的项目!··提出 本篇README.md面向开发者 目录 上手指南 替换所有链接中的“ shaojintian / Best_README_template”替换为“ ... -
vue3vite工程里面引入assets目录下的图片文件(一种方法)
2022-03-11 21:33:54<template> <div> <p>轮播图</p> <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white"> <van-swipe-item> <img :src="tu1" alt="" />...i -
vue3 vite JavaScript heap out of memory when buildin [windows or mac] 错误问题解决
2022-04-12 14:03:37打包时内存不足的问题 正常流程: 1、yarn add increase-memory-limit cross-env --dev ...3、yarn run fix-memory-limit 4、yarn build Mac 下流程: 1. export NODE_OPTIONS=--max_old_space_size=4096 -
基于vite打包的vue3 + ts + tsx模板项目
2022-02-24 21:07:47基于vite打包的vue3 + ts + tsx模板项目 -
vue3+vite环境搭建 vue3+vite实战
2021-12-30 11:18:00使用脚手架创建vue3项目,并使用vite vue3+vite环境搭建 vue3+vite实战
收藏数
22,062
精华内容
8,824