当前位置： 首页 > news >正文

使用vue搭建不需要打包的前端项目

news 2026/3/31 2:02:48

需求详情：用户不要项目进行打包，开发还是选用vue2,且需要便于上手

  1. 项目目录
>api     存放api.js，主要是前端用到的接口
>css
>>>fonts 存放页面需要的字体文件
>>>1.css 存放所有css文件
>data    存放echarts图表的options配置
>img     存放图片资源
>js      存放所有的工具方法和依赖
>views   存放view文件
>index.html  主html
>index.js    主入口js
>route.js    路由配置文件
>store.js    vuex配置文件

在这里插入图片描述

  1. index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="img/favicon.ico"><title></title><!-- 引入element主题css样式 --><link rel="stylesheet" href="css/element-3E6BBF.css" /><!-- 引入主css文件 --><link rel="stylesheet" href="css/main.css" /><!-- 引入jquery --><script src="js/jquery-1.11.3.js"></script><!-- 引入vue --><script src="js/vue.min.js"></script><!-- 引入vue-router --><script src="js/vue-router.js"></script><!-- 引入vuex --><script src="js/vuex.js"></script><!-- 引入element组件库 --><script src="js/element.js"></script><!-- 引入axios --><script src="js/axios.min.js"></script><!-- 引入httpVueLoader，使得单文件也可以使用vue组件 --><script src="js/httpVueLoader.js"></script><!-- 图表配置 --><script type="text/json" src="data/chartOption.json"></script><!-- 页面接口 --><script src="api/api.js"></script></head><body><div id="main"><router-view></router-view></div><script></script><!--路由配置文件router.js以及store.js  --必须放在主js文件旁边 --><script src="router.js" type="text/javascript" charset="utf-8"></script><script src="store.js" type="text/javascript" charset="utf-8"></script><!-- 封装axios --><script src="js/request.js" type="text/javascript" charset="utf-8"></script><!-- 主入口js文件 --><script src="index.js"></script></body</html>
  1. index.js
Vue.use(httpVueLoader);
var vue = new Vue({router,store,data: function () {return {}},mounted() {},watch: {},methods: {},}).$mount('#main');
  1. 新建vue文件
<template><!-- 基础element使用 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template><script>
module.exports = {data() {return {};},mounted() {this.getTableList();},methods: {getTableList() {this.tableData = [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄"},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄"},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄"},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄"}];}}
};
</script><style scoped>
</style>
  1. route.js
// 使用httpVueLoader编译vue组件
const test = httpVueLoader('./views/test.vue');
// 路由配置
const router = new VueRouter({// mode: 'history',routes: [{path: '*',name: "首页",component: test}]
})
// 防止连续点击多次路由报错
let routerPush = VueRouter.prototype.push;
let routerReplace = VueRouter.prototype.replace;
// push
VueRouter.prototype.push = function push(location) {return routerPush.call(this, location).catch((err) => err);
};
// replace
VueRouter.prototype.replace = function push(location) {return routerReplace.call(this, location).catch((err) => err);
};

相关文章：

使用vue搭建不需要打包的前端项目

需求详情&#xff1a;用户不要项目进行打包&#xff0c;开发还是选用vue2,且需要便于上手 项目目录 >api 存放api.js&#xff0c;主要是前端用到的接口 >css >>>fonts 存放页面需要的字体文件 >>>1.css 存放所有css文件 >data 存放echarts…...

编程日记 2024/12/10 12:21:32

发布订阅者=＞fiber=＞虚拟dom

文章目录 vue的响应式原理-发布订阅者模式vue3 响应式原理及优化fiberfiber 与 虚拟dom vue的响应式原理-发布订阅者模式 Vue响应式原理概述 Vue.js的响应式原理是其核心特性之一。它使得当数据发生变化时&#xff0c;与之绑定的DOM元素能够自动更新。其主要基于数据劫持和发布…...

编程日记 2024/12/10 12:20:31

Python-计算机中的码制以及基础运算符(用于分析内存)

记录python学习&#xff0c;直到学会基本的爬虫&#xff0c;使用python搭建接口自动化测试就算学会了&#xff0c;在进阶webui自动化&#xff0c;app自动化 python基础2-码制 计算机中的码制原码&#xff08;True Form&#xff09;反码&#xff08;Ones Complement&#xff09…...

编程日记 2024/12/10 12:17:27

yum 离线软件安装

适用范围 支持YUM软件管理的操作系统&#xff1a; 银河麒麟 服务器操作系统V10统信服务器操作系统V20CentOS 系列 准备 准备一台可以连接互联网并且与离线安装的操作系统相同版本的操作系统&#xff0c;包括指令集类型相同。 安装下载工具 查询是否已经安装下载工具 yum…...

编程日记 2024/12/10 12:14:23

【C语言】17. 数据在内存中的存储

文章目录 一、整数在内存中的存储二、⼤⼩端字节序和字节序判断1、什么是⼤⼩端&#xff1f;2、为什么有⼤⼩端?3、练习1&#xff09;练习12&#xff09;练习23&#xff09;练习34&#xff09;练习45&#xff09; 练习56&#xff09;练习6 三、浮点数在内存中的存储1、浮点数的…...

编程日记 2024/12/10 12:13:22

二叉树概述

目录 一、二叉树的基本结构 二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历 三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点 四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…...

编程日记 2024/12/10 12:11:18

【开源免费】基于SpringBoot+Vue.JS图书进销存管理系统（JAVA毕业设计）

博主说明&#xff1a;本文项目编号 T 082 &#xff0c;文末自助获取源码 \color{red}{T082&#xff0c;文末自助获取源码} T082&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...

编程日记 2024/12/10 12:10:17

惠普M126a连接共享打印机故障0x000006ba，系统不支持请求的命令，print spooler重复停止

故障说明&#xff1a;直连惠普M126a打印机正常打印&#xff0c;通过共享连接的报故障。 目前已知有三种故障&#xff1a; 1、0x000006ba报错2、系统不支持请求的命令3、print spooler重复停止&#xff08;或者&#xff0c;print spooler没有停止依然报故障&#xff09; 解决方…...

编程日记 2024/12/10 12:08:15

Chainlit集成LlamaIndex实现一个通过用户聊天对话的酒店预定系统

Agent 简介 “Agent”是一个自动推理和决策引擎。它接受用户输入/查询，并为执行该查询做出内部决策，以便返回正确的结果。关键的代理组件可以包括但不限于： 把复杂的问题分解成小问题选择要使用的外部工具+调用工具的参数计划一系列的任务将以前完成的任务存储在内存模块中…...

编程日记 2024/12/10 12:06:13

计算机网络之网络层超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络之网络层超详细讲解 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; …...

编程日记 2024/12/10 12:05:09

代码随想录算法训练营day51|动态规划part13

回文子串 回文子串这里的递推式不太一样&#xff0c;dp[i] 和 dp[i-1] &#xff0c;dp[i 1] 看上去都没啥关系。所以要回归到回文的定义 而我们发现&#xff0c;判断一个子字符串&#xff08;字符串下标范围[i,j]&#xff09;是否回文&#xff0c;依赖于&#xff0c;子字符串…...

编程日记 2024/12/10 12:04:08

ESP8266自制桌宠机器狗

看到别人的桌宠机器狗有没有想要拥有一台的冲动，其实我们可以使用少量的资金自制一台机器狗 1 硬件 esp8266芯片 舵机 超声波传感器 2 接线 ESP8266配件...

编程日记 2024/12/10 12:01:05

【力扣】409.最长回文串

问题描述 思路解析 因为同时包含大小写字母&#xff0c;直接创建个ASCII表大小的桶来标记又因为是要回文子串&#xff0c;所以偶数个数的一定可以那么同时&#xff0c;对于出现奇数次数的&#xff0c;我没需要他们的次数-1&#xff0c;变为偶数&#xff0c;并且可以标记出现过…...

编程日记 2024/12/10 11:59:03

git 拉取代码时报错 gitignore Please move or remove them before you merge.

git 拉取代码时报错&#xff0c; The following untracked working tree files would be overwritten by merge: .gitignore Please move or remove them before you merge. 当你在使用 Git 进行代码拉取&#xff08;通常是执行 git pull 或 git merge 命令&#xff09;时遇到这…...

编程日记 2024/12/10 11:58:02

19，[极客大挑战 2019]PHP1

这个好玩 看到备份网站字眼&#xff0c;用dirsearch扫描 在kali里打开 爆破出一个www.zip文件 访问一下 解压后是这个页面 class.php <?php include flag.php; error_reporting(0); class Name{ private $username nonono; private $password yesyes; publi…...

编程日记 2024/12/10 11:57:00

MQTT消息服务器mosquitto介绍及说明

Mosquitto是一个开源的消息代理软件&#xff0c;支持MQTT协议&#xff08;消息队列遥测传输协议&#xff09;。MQTT是一种轻量级的发布/订阅消息传输协议&#xff0c;专为低带宽、不可靠网络环境下的物联网设备通信而设计。以下是关于Mosquitto服务器的一些介绍和说明&#xff…...

编程日记 2024/12/10 11:55:57

uniapp结合movable-area与movable-view实现拖拽功能

前言 因为公司业务开发需要拖拽功能。 ps&#xff1a;该功能只能针对高度一致的&#xff0c;如果高度不一致需要另外二开 演示 开始 <template><view style"height: 100%;"><movable-area :style"{width: 100%, height: allHeight px}"…...

编程日记 2024/12/10 11:53:54

十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案&#xff0c;本质就是一个包含信息的字符串。 如何获取&#xff1a;在使用 JWT 身份验证中&#xff0c;当用户使用其凭据成功登录时&#xff0c;将返回 JSON Web Token&#xff08;令牌&#xff09;。 作用&#xf…...

编程日记 2024/12/10 11:52:53

文生图模型开源之光！ComfyUI - AuraFlow本地部署教程

一、模型介绍 AuraFlow 是唯一一个真正开源的文生图模型&#xff0c;由Fal团队开源&#xff0c;其代码和权重都放在了 FOSS 许可证下。基于 6.8B 参数优化模型架构&#xff0c;采用最大更新参数化技术&#xff0c;还重新标注数据集提升指令遵循质量。在物体空间和色彩上有优势…...

编程日记 2024/12/10 11:49:48

spring boot之@Import注解的应用

我们知道spring boot会通过ComponentScan定义包扫描路径进行业务定义的bean的加载&#xff0c;但是对于很多不在此包路径下定义的bean怎么办呢&#xff1f;比如其他jar包中定义的。这时候import就发挥作用了&#xff0c;通过它也可以实现bean的定义。具体是怎么做的呢&#xff…...

编程日记 2024/12/10 11:48:47

PCIe 4.0 vs 内存总线：为什么你的NVMe SSD速度上不去？

PCIe 4.0与内存总线带宽博弈&#xff1a;揭开NVMe SSD性能瓶颈的真相 当你花大价钱购入一块标称读取速度7000MB/s的高端NVMe SSD&#xff0c;实际测试却发现速度只有标称值的一半时&#xff0c;这种落差感就像买了跑车却只能在市区堵车。问题往往不在SSD本身&#xff0c;而是隐…...

编程新知 2026/3/31 1:11:03

别再让扰动拖慢你的系统！手把手教你用MATLAB/Simulink实现非线性扰动观测器（附完整代码）

非线性扰动观测器实战指南&#xff1a;从理论到MATLAB/Simulink完整实现 在控制工程领域&#xff0c;非线性扰动观测器&#xff08;NDOB&#xff09;就像一位隐形的守护者&#xff0c;默默抵消着系统运行中各种未知干扰的影响。想象一下&#xff0c;当你精心设计的控制器因为突…...

编程新知 2026/3/30 23:47:11

ES10（ES2019）新特性完整指南

ES10&#xff08;ES2019&#xff09;新特性发布时间&#xff1a;2019年6月 ES10 新增了数组扁平化、对象转换、字符串修剪等实用方法。1. Array.prototype.flat() 将嵌套数组"拉平"&#xff0c;返回一个新数组&#xff1a; 基本用法 [1, 2, [3, 4]].flat(); //…...

编程新知 2026/3/30 22:54:05

FastAPI异步测试终极指南：如何快速模拟HTTP请求进行高效测试

FastAPI异步测试终极指南&#xff1a;如何快速模拟HTTP请求进行高效测试 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi FastAPI异步测…...

编程新知 2026/3/30 22:32:00

ros2 跟着官方教学从零开始 CS

ros2 从零开始10 服务者和消费者C/S 前言 上节课介绍写了简单的Topic订阅模型。本章我们将要学习C/S模型&#xff0c;即服务者和消费者模型 背景 前面服务概念时提到过&#xff0c;服务是ROS2 节点的另一种通信方式。服务基于调用与响应模型&#xff0c;而非发布者-订阅者主题模…...

编程新知 2026/3/30 22:30:00

从一次存储故障复盘说起：深入理解FC SAN中WWN、WWPN、WWNN的区别与实战应用

从一次存储故障复盘说起&#xff1a;深入理解FC SAN中WWN、WWPN、WWNN的区别与实战应用 那天凌晨三点&#xff0c;我被一阵急促的电话铃声惊醒。客户的核心数据库集群突然失去存储连接&#xff0c;业务完全停滞。当我赶到现场时&#xff0c;运维团队已经尝试了重启服务器、更换…...

编程新知 2026/3/30 22:21:46

革命性主题建模工具Top2Vec：自动发现隐藏主题的完整指南

革命性主题建模工具Top2Vec&#xff1a;自动发现隐藏主题的完整指南 【免费下载链接】Top2Vec Top2Vec learns jointly embedded topic, document and word vectors. 项目地址: https://gitcode.com/gh_mirrors/to/Top2Vec Top2Vec是一款革命性的主题建模工具&#xff0…...

编程新知 2026/3/30 22:19:45

RAG-SQL Router实战：让AI智能判断文档与数据库查询，小白也能轻松搭建收藏版

本文介绍RAG-SQL Router系统&#xff0c;解决AI问答时判断信息来源&#xff08;文档或数据库&#xff09;的困境。通过LlamaIndex框架和OpenAI模型&#xff0c;实现智能路由决策&#xff0c;支持非结构化和结构化数据查询。提供完整代码和实战步骤&#xff0c;帮助开发者快速搭…...

编程新知 2026/3/30 21:33:01

【亲测有效】绕开收费陷阱！教你免费安装H.265/HEVC解码器，告别视频播放“绿屏”

最近在处理一些4K视频素材时&#xff0c;又遇到了老生常谈的问题——Windows 10/11无法播放H.265编码的视频&#xff0c;提示“缺少编解码器”。 大家都知道&#xff0c;解决办法是安装那个名为“HEVC 视频扩展”的微软官方插件。 然而&#xff0c;当我满怀信心地打开Microsof…...

编程新知 2026/3/30 21:14:58

Skills 如何高效地扩展 Claude 的能力

在模块化配置体系中&#xff0c;rules&#xff08;规则&#xff09;决定了 Claude 的下限&#xff08;不能搞砸什么&#xff09;&#xff0c;而 skills&#xff08;技能&#xff09;则决定了 Claude 的上限&#xff08;能多快、多准地完成复杂任务&#xff09;。高效扩展 Claud…...

编程新知 2026/3/30 19:07:07