1.1 前端-vue3项目的创建

最新推荐文章于 2025-12-27 19:25:02 发布
原创 最新推荐文章于 2025-12-27 19:25:02 发布 · 327 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

构建工具先搭好vue3框架

vue2的vue-cli脚手架基于webpack构建工具创建vue的框架.
而在vue3，可以通过vite构建工具创建vue3项目，性能更优。
两者创建方式的区别：

cmd命令基于的构建工具
vue2/vue3vue create 项目名称（或 vue ui图形化创建vue2/3项目）webpack
vue3npm create vue@latestvite(推荐)
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
CYK_byte的博客
10-18 3469
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
【Vue】人人开源前端项目renren-fast-vue部署
See_Star的博客
10-27 8504
一、环境配置 1.1 下载Node.js 下载Node.js：https://nodejs.org/zh-cn/download/ win10可以选择这个版本安装： 确认nodejs安装成功 cmd下输入node -v，查看是否能够正确打印出版本号即可！ cmd下输入npm -v，查看是否能够正确打印出版本号即可！ 安装node自带npm，npm是一个软件包管理工具，和linux下的apt软件安装差不多。 1.2 添加镜像 配置淘宝镜像加速 npm config set registry https:
【VUE】RuoYi-Vue3项目结构的分析
Blue_Pepsi_Cola的博客
04-05 1785
Vue 3 + Vite 的现代构建架构；Element Plus 提供强大的 UI 组件；Pinia 管理状态；多种工具库（图表、剪贴板、富文本、拖拽等）提升开发效率；Vite 插件自动化构建优化。return {// 部署生产环境和开发环境下的URL。// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
【前端】Vue-Cli 快速创建Vue3项目及一些项目初始化相关
CoderSharry的博客
02-20 2489
1. Vue 脚手架 快速创建 Vue3 项目 2. 新创建的项目与远程仓库初始化 3. 前端代码提交相关及参考
【vue Django 前后端分离项目】1.1 vue-cli创建项目
xiaobai_1900的博客
10-03 535
前端后端分离项目，vue3+Django
Web前端-Vue2.0框架学习
yong_19930826的博客
04-22 2434
vue是一套用于构建用户界面的前端框架。数据驱动视图双向数据绑定数据驱动视图：在使用vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：好处： 当页面数据发生变化时，页面会自动重新渲染注意： 数据驱动视图是单向的数据绑定双向数据绑定： 在填写表单时，双向数据绑定可以辅助开发者不操作DOM的前提下自动把用户填写的内容同步到数据源中好处： 开发者不需要手动操作DOM元素，来获取表单元素最新的值MVVM 是vue实现数据驱动视图和双向数据绑定的核心原理。
2022.06.07 前端-vue创建项目过程简录
小龙跳动的博客
04-07 3641
操作-操作-如何不依赖开发工具手动快速创建一个vue项目？
1.1使用HBuilder编辑器创建VUE3新项目
2201_75436433的博客
06-26 787
├── index.html # HTML模板。└── vite.config.js # Vite配置。├── public/ # 静态资源。│ ├── assets/ # 项目资源。│ ├── components/ # 公共组件。│ └── main.js # 入口文件。│ ├── App.vue # 根组件。1，启动HBuilderX，点击菜单栏。
前端学习--Vue(3)初始化vue项目
Michelle209的博客
05-19 2364
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
三、前端-VUE-Element-UI （3）
Daniel的博客
09-05 1548
上代码 👇🏾👇🏾 说明：如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用， 改变下数据的值，再次测试观察效果! 1.2、内容分发 测试 1-将上面的代码留出一个插槽，即slot 2-定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件 3-实例化Vue并初始化数据 4-将这些值，通过插槽插入 说明：我们的和todo-items组件分别被分发到了组件的和插槽中 完整代码如下： 1-在的实例中增加了对象并定义了一个名为的方法 2-修改todo-item
vue3项目创建+配置
LiLei233的博客
04-09 2553
一. 创建项目,二. 配置eslint,三. husky 代码检查工作流（非必要）,四. 路由配置，五. 配置element-plus，六. axios配置
基于springboot，ant-design-vue-pro的简易后台管理系统.zip
02-22
5.2 集成Ant-Design-Vue-Pro：将前端项目引入到后端项目，配置Webpack代理解决跨域问题。 5.3 设计数据库模型：根据业务需求设计数据库表结构，并编写实体类。 5.4 开发接口：编写Controller层的接口，配合Service层...
前端开发-vue-vu2,javascript,router-助你成为vue大佬
08-11
Vue.js 是一款流行的前端JavaScript框架，它以数据绑定和组件化为核心，简化了网页和单页应用（SPA）的开发。Vue.js 提供了一个简洁、高效且可扩展的开发环境，使得开发者能够专注于构建用户界面，而不必过于关注...
vue devSever中如何配置多个proxy 代理及pathRewrite路径重写
Morecans的专栏
12-25 322
最近项目中需要新增人脸等陆的功能，但是后天开发需要用到python，这就使得一个前端根据不同的URL访问两个不同的后端。生成环境使用的是nginx，前端使用的是vue，就琢磨了一下vue devServer中如何配置多个proxy 代理和pathRewrite路径重写。
Vue 2 / Vue 3 diff算法
qq_25416827的博客
12-26 418
一句话核心结论。
Node.js 后端 CORS 跨域问题终极解决指南
weixin_45680024的博客
12-25 1066
node.js后端跨域问题收录
Vue.js 前端开发实战之 01-Vue 基础入门
一只多仔。
12-26 805
文章梳理前端演进脉络，对比 jQuery、React 等框架后，聚焦 Vue 的渐进式理念与 MVVM 双向绑定机制；手把手示范从 Node.js、npm、webpack 到 vue-devtools 的完整环境搭建，并用第一个 Hello Vue 示例演示引入、实例化与插值渲染，为后续实战奠定轻量级、组件化开发基础。
从命令式跳转到声明式路由：前端、Android、Flutter 的一次统一演进
Mark Wu 的博客
12-25 1176
本文探讨了前端、Android和Flutter平台中路由系统的本质共性。作者指出，尽管各平台API和实现细节不同，但都采用了"声明式路由+全局导航治理"的核心模式。文章分析了命令式跳转在复杂项目中必然失控的原因，阐释了声明式路由将跳转行为转化为状态映射的思想转变。通过对比三种平台的路由实现（前端路由表、Android ARouter和Flutter go_router），揭示了它们共同的抽象维度。最后强调全局导航治理是复杂应用的必然选择，指出理解这一共性有助于快速掌握新技术。
vue v-for 列表渲染指令注意
最新发布
KLW75
12-27 207
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
ruoyi-vue使用nginx tomcat部署项目
03-28
### Ruoyi-Vue 使用 Nginx 和 Tomcat 的部署教程 #### 一、Tomcat 配置 为了使 Ruoyi-Vue 后端能够正常运行，需完成以下配置： 1. 编辑 `server.xml` 文件以设置监听端口和编码方式： 修改 `/opt/tomcat/apache-tomcat-9.0.70/conf/server.xml` 中的 `<Connector>` 节点为如下内容[^1]： ```xml <Connector port="8282" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/> ``` 2. 将编译好的后端 WAR 包放置到指定路径下： 将文件 `RuoYi-Vue/ruoyi-admin/target/ruoyi-admin.war` 放入 `/opt/tomcat/apache-tomcat-9.0.70/webapps`。 3. 执行启动命令并验证服务状态： - 启动 Tomcat：`sh /opt/tomcat/bin/startup.sh` - 关闭 Tomcat：`sh /opt/tomcat/bin/shutdown.sh` - 查看进程是否存在：`ps -ef | grep -i tomcat` 4. 开放防火墙端口以便外部访问： 添加规则允许 TCP 流量通过端口 8282 并重新加载防火墙配置: ```bash firewall-cmd --zone=public --add-port=8282/tcp --permanent && firewall-cmd --reload ``` 5. 访问地址测试： 输入浏览器 URL 地址 `http://<服务器IP>:8282/ruoyi-admin` 来确认后端接口是否可用。 如果遇到端口冲突问题，则需要停止其他占用相同端口的服务实例。例如，若虚拟机上已存在旧版 Tomcat 实例，可通过以下指令解决[^2]： ```bash systemctl stop tomcat systemctl disable tomcat ``` --- #### 二、Nginx 配置 为了让前端静态资源被正确代理至后台 API 接口，需调整 Nginx 设置。 1. 安装 Nginx（如未安装）： 可使用包管理器快速安装： ```bash sudo apt update && sudo apt install nginx ``` 2. 创建或编辑站点配置文件： 在 `/etc/nginx/sites-available/default` 或新建特定配置文件中加入反向代理逻辑。以下是典型示例[^5]： ```nginx server { listen 80; server_name your-domain.com; location / { root /path/to/frontend/dist; # 替换为实际构建后的前端目录 index index.html; try_files $uri /index.html; # Vue Router 模式支持 } location /prod-api/ { # 对应后端 API 请求前缀 proxy_pass http://localhost:8282/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` 3. 加载新配置并重启服务： 更新完成后执行以下操作生效更改： ```bash sudo nginx -t # 检测语法错误 sudo systemctl restart nginx ``` 此时，当客户端发起 HTTP 请求时，Nginx 会依据设定将不同类型的流量分别转发给对应的处理模块——即 HTML/CSS/JS 等由本地磁盘提供，而 RESTful 数据交互则交予远程 Tomcat 处理。 --- #### 三、注意事项 - 若发现登录功能异常或者返回 404 错误码，请核查路由映射关系以及前后端通信协议一致性。 - Maven 构建工具位于 bin 子目录内，其主要职责在于解析依赖项列表并通过标准化流程生成目标产物文件夹结构[^3]。 - POM 文件定义了整个工程元数据及其生命周期阶段描述符等内容框架[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值