草庐IT

微前端-qiankun:vue3-vite 接入 vue3-vite

一、背景主应用:vue3、vite主项目接入qiankun子应用:vue3、webpack二、代码-接入子应用2.1、安装vite-plugin-qiankun(qiankun官方不支持vite)需要安装插件pnpmaddvite-plugin-qiankun2.2、vite.config.tsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'importqian

RuoYi-Vue3 分离版前端(Vue3 Element Plus Vite)版本在Nginx下配置二级域名

一、RuoYi-Vue3 前端进行配置:二级域名名称统一为:admin1-1、修改vue.config.js文件中的base,如下截图: 1-2、修改在src/router目录下的index.js文件,注意:这里添加base的方式和添加ruoyi-ui前端项目的方式是不一样的,网上有很多文章都是以ruoyi-ui2.x这个版本在讲解,别被误导了,截图如下: 1-3、配置登出地址:修改/src/layout/componets/Navbar.vue文件里的logout()方法,截图如下: 二、Nginx配置:我这里做了nginx配置文件单独导入形式的配置,截图如下:1-1、 1-2、子配置文件配

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

.markdown-body{line-height:1.75;font-weight:400;font-size:16px;overflow-x:hidden;color:rgba(37,41,51,1)}.markdown-bodyh1,.markdown-bodyh2,.markdown-bodyh3,.markdown-bodyh4,.markdown-bodyh5,.markdown-bodyh6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-bodyh1{font-si

[GN] 使用vue3+vite+ts+prettier+eslint

学习目标:做到代码格式等统一,此时,esint和prettier就要登场了。学习内容:eslint是代码检测工具,可以检测出你代码中潜在的问题,比如使用了某个变量却忘记了定义。prettier是代码格式化工具,作为代码格式化工具,能够统一你或者你的团队的代码风格。=>安装prettier+eslint包,并做一系列的配置学习时间:创建项目yarncreatevite选择vue作为framework选择vue-ts是package.json中配置的eslint和prettier相关的包:{"name":"xxx","private":true,"version":"0.0.0","type":"

rouyi-vue-pro+vue3+vite4+Element Plus项目中使用生成Vue2+Element UI标准模板

运行一个pro-vue3的前端项目,以及后端服务在基础设施-代码生成模块中选择某张数据库表导入,并编辑生成信息,前端类型:Vue2+ElementUI标准模板在vue3项目中创建一个vue文件//import{create}from'@/api/test'exportdefault{created(){create().then(res=>{console.log(res);})}}1.4src\api\test.jsimportrequestfrom'@/utils/request'//创建药品exportfunctioncreate(data){returnrequest({url:'/d

vue3+vite的axios的封装与全局使用

1.安装axios使用npm或yarn安装axios到项目中//使用pnpm安装  pnpminstallaxios//使用npm安装  npminstallaxios//使用yarn安装 yarnaddaxiosaxios是一个基于Promise的HTTP请求库,支持PromiseAPI、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。 2.创建文件封装axios在src同级目录下创建utils(工具)文件夹,创建axios.ts,代码如下:因为是ts所以有时候会报红,是因为ts语法问题,给每个参或者函数添加类型就可以了。importaxiosfrom'

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold文章目录使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架一、前言二、脚手架技术栈简介2.1uni-app2.2vue32.3TypeScript2.4Pinia2.5TailwindCSS2.6uv-ui2.7vite三、详细步骤3.1Node.

【前端趋势】Vue、Vite作者尤雨溪前端趋势2022主题演讲

欢迎来到我的博客📔博主是一名大学在读本科生,主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🌈博客主页👉codeMak1r.的博客最新专栏【React–从基础到实战】本文目录一、开发范式&底层框架ReactHooks基于编译的响应式系统统一模型的优势和代价基于编译的运行时优化二、工具链原生语言在前端工具链中的使用工具链的抽象层次基于Vite的上层框架三、上层框架数据的前后端打通类型的前后端打通JS全栈的代价社区探索的方向🕹坚持创作✏️,一起学习📖,码出未来👨🏻‍💻!2022年7月22日,也就是前天,在某平台开发者大会上,知名前端

uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

        因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的VantUI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个搭配技术还比较新吧,好像是去年12月份完善的技术),如果按照网上的vue-cli+vant的方法配置DCloud官网中提供的uni-app的项目似乎并不可行(满屏的bug)uni-app官网,鉴于对Vant的热爱,经过本人不懈努力了2周后,终于成功的适配了! 下面就和各位分享一下如何uni-app

记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置文件nginx.conf】3.配置开发环境【跟目录下分别创建:.env.development、.env.production】        .env.development内容如下:VITE_APP_PROXY_BASE_API='/proxyCustomerApi-dev'        .env.producti