vue3项目打包默认情况下npm run build后会将文件打包到dist目录下，其中dist/index.html是首页从上面我们可以知道资源都是以/进行访问，我们使用vscode的live server插件后打开发现资源出现问题，访问地址为：http://127.0.0.1:5500/demo/dist/index.html资源从/加载的话会将协议://域名：端口进行拼接导致我们的资源出现异
转载
2023-07-18 21:37:04
368阅读
1. Vue2.x 和 Vue3.x 生命周期方法的变化文档地址：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.htmlVue2.x 和 Vue3.x 生命周期方法的变化蛮大的，先看看：2.x 生命周期3.x 生命周期执行时间说明beforeCreatesetup组件创建前执行createdsetup组件创建后执行bef
Vue3.0的六大亮点：Performance：性能比 Vue2.x 快 1.2~2 倍Tree shaking support：按需编译，体积比 Vue2.x更小Composition API：组合API(类似 React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment，Telepo
VUE3小结1、Vue3.0环境集成1.使用vue-cli创建2.使用vite创建2、常用的Composition API（组合API）1、setup函数2、ref函数3、reactive函数4、Vue3.0中的响应式原理7、监听属性10、自定义事件11、属性传值13、占位组件Suspense和异步组件14、注册组件（八种方式）15、isRef toRef toRefs（响应式数据解构）16、r
# Vue3项目使用Yarn打包
## 简介
Vue是一套用于构建用户界面的渐进式JavaScript框架，它使用了虚拟DOM来更新DOM，使得应用程序更加高效和响应迅速。Vue3是Vue框架的下一个主要版本，它引入了许多新的特性和改进。
在Vue3项目中，我们可以使用Yarn作为包管理器来管理我们的依赖项并进行打包。Yarn是一个快速、可靠和安全的包管理器，它具有与NPM相似的命令和功能，
场景 在开发过程中，通常会遇到这样的问题：在开发环境、测试环境和生产环境中我们会用到不一样的服务接口 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口 多端一体的项目模式 这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。
vue搭建准备环境npmnodewebpackvs codenpm使用brew命令行进行下载安装指定版本：brew install npm查看版本号：$ npm -v
8.15.0Node进入官网nodejs，根据自己电脑的版本进行下载安装，如果是mac电脑，可以直接使用brew命令行进行下载。 安装指定版本号：brew install node@16安装完成后，使用node -v的命令查看版本号
使用vite构建vue3项目、vite
原创
精选
2023-06-27 10:31:51
701阅读
前言vue3已经正式发布有一段时间了，本着学习使人进步的原则，就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite，那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript，并且现在ts也很火，就正好一起实践一下。准备工作 确保安装了node开始1、项目初始化npm init vite-app my-vue3此时项目就已经初始化好，并且可以正常运行了。cd
项目的创建vue3中vuecli的包修改为@vue/cli，vue创建的项目命令修改为vue create，用来快速创建新项目。因为项目开发中需要vuecli，所以我们需要全局安装，下面中的-g表示全局安装，install也可以简写为i。安装完成后，我们可以通过vue --versioon检查是否安装成功。除了npm安装外，我们也可以使用yarn
原创
精选
2022-05-24 21:11:11
2535阅读
Vue3项目整合Electron第一步安装：VUE3安装vue3脚手架npm install -g @vue/cli安装 yarn，并设置淘宝源npm install -g cnpm --registry=https://registry.npm.taobao.org设置ELECTRON_MIRROR,加速electron的预编译npm config set ELECTRON_M...
原创
2022-12-19 13:51:20
546阅读
一. 代码规范1.1 集成editorconfig配置EditorConfig有助于为不同IDE编辑器上维护一致的编码风格安装插件：EditorConfig for VS Code 后会读...
原创
2022-06-29 20:47:16
439阅读
# Vue3项目使用TypeScript
## 概述
在本文中，我将向你介绍如何在Vue3项目中使用TypeScript。Vue3是一种流行的JavaScript框架，而TypeScript是一种类型安全的JavaScript超集。结合使用Vue3和TypeScript可以提供更好的开发体验和代码质量。
## 步骤
下面是实现Vue3项目使用TypeScript的步骤：
| 步骤 | 描述
原创
2023-08-03 07:34:47
249阅读
目录1、Input 输入框2、Table 表格3、Tree 树形控件4、Pagination 分页5、Dialog 对话框6、ECharts 图表7、wangEditor 富文本编辑器整理一下自己在 Vue2 项目中常用到的一些封装组件 ：大部分是结合 element-ui 组件库 进行的二次封装 ：饿了么组件库 => Element - The world
vue3 工程结构分析 vm vs app前言主要内容1 工程结构分析1.1 图示1.2 叙述2 vue3工程结构2.1 app与vm2.2 App.vue2.3 语法检查summary前言这篇文章的相关知识在vue3第一幕基础与起步中有过提及，本文相当于是对它的补充，侧重点在vue2的vm与vue3的app。本文是vue3知识的一部分，主要内容是vue3的工程结构分析。文章会给出工程结构图和具
最近自己构建了一个 vite 2.0 + vue 3.2.* 的开源项目，记录一下本次项目进行本地代码打包压缩的优化 手摸手开始优化什么是gzip为什么要去优化如何优化1. 前端代码配置代码压缩服务器配置``Failed to load module script: Expected a JavaScript module script but the server responded with
文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结
原创
2022-07-20 06:38:14
3737阅读
# 如何配置Vue 3项目中的axios.create
## 引言
在Vue 3项目中，我们经常使用axios来进行网络请求。为了更好地管理和使用axios，我们可以使用axios.create()方法创建一个自定义的axios实例。通过配置这个实例，我们可以灵活地设置请求的默认值、拦截请求和响应，以及自定义一些全局的处理逻辑。本文将介绍如何在Vue 3项目中正确配置axios.create(
原创
2023-08-24 18:52:57
385阅读
1 Vite项目目录 用Vscode打开创建的项目，看到下面的目录结构： 通过运行 npm install 初始化项目后生成两个初始化文件：node_modules和 package-lock.json2 SFC 语法规范*.vue 件都由三种类型的顶层语法块所组成：<template>、<script>、<style><t
转载
2023-08-07 23:55:48
266阅读
