接下来就来正式实战,看看docker怎样去部署一个Vue前后端分离的项目，我们从以下三点来进行：Vue项目打包Docker镜像后端项目Nginx的配置一. Vue项目打包这里说下,我服务器本身就有Nginx服务,所以我只需要将Vue项目进行打包然后上传到服务器,Nginx能访问到即可,并未使用到Docker进行构建1.1 通过命令打包进到项目根目录然后执行打包命令cd 项目根目录npm run b
转载
2024-10-23 17:03:05
348阅读
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
434阅读
1.node项目中的命令1.创建一个文件夹，在里面打开命令提示符----- npm init，出现一系列文件信息 —— 一直空格 退出后会自动创建一个package.json文件空格出现的内容 package name:文件夹名字 version：版本 description:描述，描写；类型；说明书 entry point：入口点 test command( ke man):测试命令 git r
转载
2024-10-10 17:43:05
43阅读
yarn 打包 vue3 项目的过程
在当今的前端开发中，Vue 3 的流行程度不容小觑，它的轻量且高效的特点使得各种业务场景都能得以实现。随着业务的发展，有效的项目打包就显得尤为重要。以下是关于使用 `yarn` 打包 Vue 3 项目的详细过程记录。
### 背景定位
在快速发展的互联网公司中，业务场景越来越复杂，尤其是在用户访问量的持续增长下，系统的响应速度及打包策略需要进行优化。项目
一、 There are multiple modules with names that only differ in casing.这个情况是如果多出引用的组件 有一个地方的引用地址的大小写肯定是写错了 检查一下二、vue渲染iconfontvue渲染iconfont的时候，用unicode。四、预览打包后的文件vue-cli打包build出来的dist文件夹，如果直接用本地文件的形式打开，是
下面是我在开发大型 Vue 项目时的最佳实践。这些技巧将帮助你开发更高效、更易于维护和共享的代码。今年做自由职业的时候，我有机会开发了一些大型 Vue 应用程序。我所说的这些项目，Vuex store 超过十个，包含大量的组件（有时候几百个）和视图页面。对我来说这是个很有益的经验，因为我发现了很多有意思的模式，可以让代码拥有更好的伸缩性。我还必须修正一些导致著名的
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
转载
2023-11-27 01:50:54
188阅读
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
转载
2024-06-28 19:03:32
168阅读
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
转载
2024-01-29 00:53:55
110阅读
# Vue3项目使用Yarn打包
## 简介
Vue是一套用于构建用户界面的渐进式JavaScript框架，它使用了虚拟DOM来更新DOM，使得应用程序更加高效和响应迅速。Vue3是Vue框架的下一个主要版本，它引入了许多新的特性和改进。
在Vue3项目中，我们可以使用Yarn作为包管理器来管理我们的依赖项并进行打包。Yarn是一个快速、可靠和安全的包管理器，它具有与NPM相似的命令和功能，
原创
2023-11-25 13:36:09
350阅读
须知本文部分内容参考以下链接：blog.fundebug.com/2018/06/08/…步骤1、安装 Vue-CLInpm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码参考：cli.vuejs.org/zh/guide/in…2、用 Vue-CLI 创建项目定位到上级目录，创建 Vue-CLI 项目。新建或者覆盖都可以vue cre
vue搭建准备环境npmnodewebpackvs codenpm使用brew命令行进行下载安装指定版本：brew install npm查看版本号：$ npm -v
8.15.0Node进入官网nodejs，根据自己电脑的版本进行下载安装，如果是mac电脑，可以直接使用brew命令行进行下载。 安装指定版本号：brew install node@16安装完成后，使用node -v的命令查看版本号
转载
2024-08-29 21:30:56
282阅读
场景 在开发过程中，通常会遇到这样的问题：在开发环境、测试环境和生产环境中我们会用到不一样的服务接口 在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口 多端一体的项目模式 这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。
转载
2024-05-09 11:02:51
306阅读
这里 我的接口是写在 http://localhost:80上的 接口名是user 需要一个id路径参数 我们知道 80是默认 所以就可以不带端口因此访问就是http://localhost/user/1 然后 我vue项目中的 vue.config.js 配置如下const { defineConfig } = require('@vue/cli-service')
module.exports
创建vue3项目
原创
2024-05-16 11:01:57
76阅读
# Vue 3 项目架构解析
Vue.js 是一个流行的前端框架，广泛应用于开发现代化的单页应用（SPA）。随着 Vue 版本的迭代，Vue 3 引入了许多新特性，使得构建组件化和可维护的应用变得更加简单。本文将详细讲述 Vue 3 项目架构的组成部分，并通过代码示例解释如何实现它。
## 一、项目构建
使用 Vue CLI 创建项目是最常见的方式。以下是创建 Vue 3 项目的命令：
`
vue3项目快速开发模板简介本项目采用 vue3 + webpack 的方式来开发，已经引入了常用功能，不需要再去配置路由、请求、pinia 等，上手直接开发页面即可，真正做到开箱即用你可以直接拉取我的仓库来直接使用，也可以按照本文教程自己操作技术栈vue3webpackpiniavue-router4element-plusaxiosi18nsass启动项目安装npm install运行npm
现在我们做移动端项目的时候，要么用vue要么用react,用vue最大的问题就是移动端打包。用hbuilder打包是云端打包总感觉不安全，cordova打包还是蛮好的第一步： 安装cordovanpm install -g cordova是否成功可用如下命令查看cordova -v 2.新建cordova项目cordova create myApp1 org.apache.cordova.myAp
使用vite构建vue3项目、vite
原创
精选
2023-06-27 10:31:51
872阅读
前言vue3已经正式发布有一段时间了，本着学习使人进步的原则，就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite，那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript，并且现在ts也很火，就正好一起实践一下。准备工作 确保安装了node开始1、项目初始化npm init vite-app my-vue3此时项目就已经初始化好，并且可以正常运行了。cd
转载
2023-10-26 19:44:55
347阅读
