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
366阅读
场景 在开发过程中，通常会遇到这样的问题：在开发环境、测试环境和生产环境中我们会用到不一样的服务接口 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口 多端一体的项目模式 这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。
# Vue3项目使用Yarn打包
## 简介
Vue是一套用于构建用户界面的渐进式JavaScript框架，它使用了虚拟DOM来更新DOM，使得应用程序更加高效和响应迅速。Vue3是Vue框架的下一个主要版本，它引入了许多新的特性和改进。
在Vue3项目中，我们可以使用Yarn作为包管理器来管理我们的依赖项并进行打包。Yarn是一个快速、可靠和安全的包管理器，它具有与NPM相似的命令和功能，
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.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
一.环境搭建1.安装node.js（window10）下载完直接安装，下一步。。。安装好node，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口2.安装cnpm由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像---cnpm
在命令行中输入npm install
# 使用 Yarn 启动 Vue 3 项目：完整指南
在现代前端开发中，Vue.js 是一个非常流行的框架。而 Yarn 作为一个高效的包管理工具，能够帮助开发者快速构建和启动 Vue 3 项目。本文将为您提供一步一步的指导，以帮助您快速上手，并解决一个实际问题：如何用 Yarn 启动 Vue 3 项目。
## 一、环境准备
在开始之前，您需要确保您的开发环境已安装了 Node.js 和 Y
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
vue搭建准备环境npmnodewebpackvs codenpm使用brew命令行进行下载安装指定版本：brew install npm查看版本号：$ npm -v
8.15.0Node进入官网nodejs，根据自己电脑的版本进行下载安装，如果是mac电脑，可以直接使用brew命令行进行下载。 安装指定版本号：brew install node@16安装完成后，使用node -v的命令查看版本号
# 如何在Vue3项目中加入Yarn
在Vue3项目中使用Yarn管理包依赖是一种非常方便和高效的方式。Yarn是一个快速、可靠的包管理工具，可以帮助我们更好地管理项目中的依赖关系。本文将介绍如何在Vue3项目中加入Yarn，并展示一些基本的操作。
## 步骤
### 步骤一：安装Yarn
首先，我们需要在电脑上安装Yarn。可以通过以下命令在全局安装Yarn：
```bash
npm
# 如何配置Vue 3项目中的axios.create
## 引言
在Vue 3项目中，我们经常使用axios来进行网络请求。为了更好地管理和使用axios，我们可以使用axios.create()方法创建一个自定义的axios实例。通过配置这个实例，我们可以灵活地设置请求的默认值、拦截请求和响应，以及自定义一些全局的处理逻辑。本文将介绍如何在Vue 3项目中正确配置axios.create(
原创
2023-08-24 18:52:57
385阅读
Vue 项目文件结构介绍一、文件介绍main.js是项目主入口文件，主要作用是初始化vue实例，并引入所需插件； App.vue是项目主组件，所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。 index.html为文件入口; src放置组件和入口文件; node_modules为依赖的模块; config中配
Vue3.0 beta也出来一段时间了，最近一直在看react，对于vue3.0倒是没怎么关注，想着等正式版出来再说，不过最近事情不多，还是抽出了一点时间，试了一下新版的Vue3.0，不得不说，改动还是有的，对于初上手的人可能没有之前友好 尤大官方的直播也有一些介绍 但是毕竟还是beta版，配套的支持还不多，生产环境暂时还是不要使用为好安装使用vue-cli创建项目，我用的是4.4.6版本，不是最
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构建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
文章目录Vite创建Vue3项目1. 输入项目名称2. 选择框架3. 选择不同的vue4. 项目创建完成5. 项目结
原创
2022-07-20 06:38:14
3737阅读
项目的创建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阅读
