使用vue搭建不需要打包的前端项目
需求详情：用户不要项目进行打包，开发还是选用vue2,且需要便于上手
- 项目目录
>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配置文件
- 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>
- index.js
Vue.use(httpVueLoader);
var vue = new Vue({router,store,data: function () {return {}},mounted() {},watch: {},methods: {},}).$mount('#main');- 新建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>
- 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搭建不需要打包的前端项目
需求详情：用户不要项目进行打包，开发还是选用vue2,且需要便于上手 项目目录 >api 存放api.js，主要是前端用到的接口 >css >>>fonts 存放页面需要的字体文件 >>>1.css 存放所有css文件 >data 存放echarts…...
发布订阅者=＞fiber=＞虚拟dom
文章目录 vue的响应式原理-发布订阅者模式vue3 响应式原理及优化fiberfiber 与 虚拟dom vue的响应式原理-发布订阅者模式 Vue响应式原理概述 Vue.js的响应式原理是其核心特性之一。它使得当数据发生变化时，与之绑定的DOM元素能够自动更新。其主要基于数据劫持和发布…...
)
Python-计算机中的码制以及基础运算符(用于分析内存)
记录python学习，直到学会基本的爬虫，使用python搭建接口自动化测试就算学会了，在进阶webui自动化，app自动化 python基础2-码制 计算机中的码制原码（True Form）反码（Ones Complement）…...
yum 离线软件安装
适用范围 支持YUM软件管理的操作系统： 银河麒麟 服务器操作系统V10统信服务器操作系统V20CentOS 系列 准备 准备一台可以连接互联网并且与离线安装的操作系统相同版本的操作系统，包括指令集类型相同。 安装下载工具 查询是否已经安装下载工具 yum…...
【C语言】17. 数据在内存中的存储
文章目录 一、整数在内存中的存储二、⼤⼩端字节序和字节序判断1、什么是⼤⼩端？2、为什么有⼤⼩端?3、练习1）练习12）练习23）练习34）练习45） 练习56）练习6 三、浮点数在内存中的存储1、浮点数的…...
二叉树概述
目录 一、二叉树的基本结构 二、二叉树的遍历 1.前序 2.中序 3.后序 4.层序遍历 三.计算二叉树的相关参数 1.计算节点总个数 2.计算叶子节点的个数 3.计算树的高度 4.计算第k层的子树个数 5.查找树中val为x的节点 四.刷题 1.单值二叉树 2.检查两棵树是否相同 3.一…...
【开源免费】基于SpringBoot+Vue.JS图书进销存管理系统（JAVA毕业设计）
博主说明：本文项目编号 T 082 ，文末自助获取源码 \color{red}{T082，文末自助获取源码} T082，文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...
惠普M126a连接共享打印机故障0x000006ba，系统不支持请求的命令，print spooler重复停止
故障说明：直连惠普M126a打印机正常打印，通过共享连接的报故障。 目前已知有三种故障： 1、0x000006ba报错2、系统不支持请求的命令3、print spooler重复停止（或者，print spooler没有停止依然报故障） 解决方…...
Chainlit集成LlamaIndex实现一个通过用户聊天对话的酒店预定系统
Agent 简介 “Agent”是一个自动推理和决策引擎。它接受用户输入/查询，并为执行该查询做出内部决策，以便返回正确的结果。关键的代理组件可以包括但不限于： 把复杂的问题分解成小问题选择要使用的外部工具+调用工具的参数计划一系列的任务将以前完成的任务存储在内存模块中…...
计算机网络之网络层超详细讲解
个人主页：C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 计算机网络之网络层超详细讲解 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记，欢迎大家在评论区交流讨论💌 …...
代码随想录算法训练营day51|动态规划part13
回文子串 回文子串这里的递推式不太一样，dp[i] 和 dp[i-1] ，dp[i 1] 看上去都没啥关系。所以要回归到回文的定义 而我们发现，判断一个子字符串（字符串下标范围[i,j]）是否回文，依赖于，子字符串…...
ESP8266自制桌宠机器狗
看到别人的桌宠机器狗有没有想要拥有一台的冲动，其实我们可以使用少量的资金自制一台机器狗 1 硬件 esp8266芯片 舵机 超声波传感器 2 接线 ESP8266配件...
【力扣】409.最长回文串
问题描述 思路解析 因为同时包含大小写字母，直接创建个ASCII表大小的桶来标记又因为是要回文子串，所以偶数个数的一定可以那么同时，对于出现奇数次数的，我没需要他们的次数-1，变为偶数，并且可以标记出现过…...
git 拉取代码时报错 gitignore Please move or remove them before you merge.
git 拉取代码时报错， The following untracked working tree files would be overwritten by merge: .gitignore Please move or remove them before you merge. 当你在使用 Git 进行代码拉取（通常是执行 git pull 或 git merge 命令）时遇到这…...
19，[极客大挑战 2019]PHP1
这个好玩 看到备份网站字眼，用dirsearch扫描 在kali里打开 爆破出一个www.zip文件 访问一下 解压后是这个页面 class.php <?php include flag.php; error_reporting(0); class Name{ private $username nonono; private $password yesyes; publi…...
MQTT消息服务器mosquitto介绍及说明
Mosquitto是一个开源的消息代理软件，支持MQTT协议（消息队列遥测传输协议）。MQTT是一种轻量级的发布/订阅消息传输协议，专为低带宽、不可靠网络环境下的物联网设备通信而设计。以下是关于Mosquitto服务器的一些介绍和说明ÿ…...
uniapp结合movable-area与movable-view实现拖拽功能
前言 因为公司业务开发需要拖拽功能。 ps：该功能只能针对高度一致的，如果高度不一致需要另外二开 演示 开始 <template><view style"height: 100%;"><movable-area :style"{width: 100%, height: allHeight px}"…...
、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库)
十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库
1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案，本质就是一个包含信息的字符串。 如何获取：在使用 JWT 身份验证中，当用户使用其凭据成功登录时，将返回 JSON Web Token（令牌）。 作用…...
文生图模型开源之光！ComfyUI - AuraFlow本地部署教程
一、模型介绍 AuraFlow 是唯一一个真正开源的文生图模型，由Fal团队开源，其代码和权重都放在了 FOSS 许可证下。基于 6.8B 参数优化模型架构，采用最大更新参数化技术，还重新标注数据集提升指令遵循质量。在物体空间和色彩上有优势…...
spring boot之@Import注解的应用
我们知道spring boot会通过ComponentScan定义包扫描路径进行业务定义的bean的加载，但是对于很多不在此包路径下定义的bean怎么办呢？比如其他jar包中定义的。这时候import就发挥作用了，通过它也可以实现bean的定义。具体是怎么做的呢ÿ…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
 error)
【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error
在前端开发中，JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作（如 Promise、async/await 等），开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝（r…...
前端工具库lodash与lodash-es区别详解
lodash 和 lodash-es 是同一工具库的两个不同版本，核心功能完全一致，主要区别在于模块化格式和优化方式，适合不同的开发环境。以下是详细对比： 1. 模块化格式 lodash 使用 CommonJS 模块格式（require/module.exports&a…...