VUE + nodejs实战

BVDN搭建
D:
cd nodejs
::npm install bootstrap
::npm install jquery
::npm install popper.js
::npm install vue
npm install vue-router
pause
app.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head><!--bootstrap--><link rel="stylesheet" href="/static/css/bootstrap.css"><link rel="stylesheet" href="/static/css/bootstrap-theme.css"><script src="/static/js/jquery.js"></script><script src="/static/js/bootstrap.js"></script>	<!--vue--><script src="/static/js/vue.js"></script>	<title>My First Page</title>
</head>
<body>
<nav class="navbar navbar-inverse"><ul class="navbar-header"><a href="#">My First Page</a><div></div></ul>
</nav><div class="container container-center jumbotron"><div class="col-sm-4"><div id="app" class="form-group"><p class="form-contrl" v-text="aaa"></p><span>Input here:</span><input class="form-contrl" v-model='aaa'>	</div>	</div></div>
</body>
<script type="text/javascript">var vm = new Vue({el: '#app',data: {aaa: '',}})
</script>
</html>
firstPage.html
<!DOCTYPE html>
<html><head><title>Example</title><link href = './asserts/style.css' rel = 'stylesheet' type='text/css'></head><body><div class='site-hdeader'><p class='site-title'>Trutle Ipsum</p><p class=''site-subtitle'>The World's Premier T</p></div><div class='main-nav'><p class "nav-header">Resources</p><div class='nav-list'><p class='nav-item nav-item-bull'><a href='https://www.youtube.com/watch?v=CMNry4PE93Y'> I like Tube</a></p><p class='nav-item nav-item-bull'><a href='https://en.wikipedia.org/wiki/Turtle'>Basic Turtle Info</a></p><p class='nav-item nav-item-bull'><a href='https://en.wikipedia.org/wiki/Turtles_(chocolate)'>Chocolate Turtles</a></p></div></div><div class='main-content'><div><p class='page-title'>Welcome to Turtle Ipsum.</a href=''>Click here</a>to learn more.</p><p class='acticle-text'>Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div></div><div class='footer'><div class='footer-section'><span class='button'>Sign up for turtle news</span></div><div class='footer-section'><p class='page-title'>Internal Pages</p><div class='nav-list'><p class='nav-item nav-item-bull'><a href='../'>index</a></p><p class='nav-item nav-item-bull'><a href='../semantic'>Semantic Example</a></p></div></div><p class='fotter-copyright'>&copy; 2016 Instrument</p></div></body>
</html><script>function add(a, b = 1){return a+b;}function sub(c, d){return c-d;}console.log("add :${add(1+1)}");
</script>
插件

https://github.com/Sneezry/chrome_extensions_and_apps_programming
综述--扩展开发文档

https://developer.chrome.com/extensions/manifest

{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
"default_locale": "en",
"description": "A plain text description",
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"page_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
"options_page": "options.html",
"permissions": [
"*://www.google.com/*"
],
"web_accessible_resources": [
"images/*.png"
]
}

node-sass

npm install -d node-sass@4.12.0 --registry=https://registry.npm.taobao.org --SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ --PHANTOMJS_CDNURL=https://npm.taobao.org/mirrors/phantomjs/ 

参考

GitHub - liuyanghejerry/painttyServer: This is server of Mr.Paint, 茶绘君, located at http://mrspaint.com

GitHub - deanhume/progressive-web-apps-book: All of the code for "Progressive Apps" - a book by Dean Hume

GitHub - qmlweb/qmlweb: A QML engine in a web browser. Current state: fixing things…

vue2-elm: 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
Orchid-02/基于bootstarp的仿京东购物首页 大二实训

GitHub - changkun/changkun-blog-clients: Changkun's Blog Desktop&Mobile Client

https://blog.csdn.net/luanpeng825485697/column/info/17191

https://github.com/sashafierce/pdf.js

https://github.com/public-apis/public-apis

https://tauri.studio/en/docs/getting-started/setup-windows

https://github.com/zhaojun1998/zfile

https://gitee.com/docmirror/dev-sidecar

https://github.com/avwo/whistle

https://github.com/jspreadsheet/ce

https://github.com/bnoordhuis/gyp/blob/master/test/additional-targets/src/all.gyp

核心小程序商城系统(CoreShop): 基于 Asp.Net Core 5.0、Uni-App开发,支持可视化布局的小程序商城系统,前后端分离,支持分布式部署,跨平台运行,拥有分销、代理、团购、拼团、秒杀、直播、优惠券、自定义表单等众多营销功能,拥有完整SKU、下单、售后、物流流程。支持一套代码编译发布微信小程序版、H5版、Android版、iOS版、支付宝小程序版、字节跳动小程序版、QQ小程序版等共10个平台。

https://gitee.com/fanjiatian/pc-end-qq

https://gitee.com/fanjiatian/contour-waterfall

学习CSS布局

http://css.doyoe.com/

https://github.com/chadluo/CSS-Guidelines/blob/master/README.md

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

https://github.com/CNOliverZhang/PotatofieldImageToolkit/

https://github.com/jgraph/drawio-diagrams

https://github.com/ImageGlass

https://github.com/atom/atom

GitHub - electron/electron-api-demos: Explore the Electron APIs

https://github.com/microsoft/Web-Dev-For-Beginners

Orchid-02/基于Vue调用网易云音乐API的在线音乐播放WebApp

https://gitee.com/Orchid-02/WebStoping

快速开始 | Tauri Apps

https://github.com/FortAwesome/Font-Awesome

Lighthouse首页、文档和下载 - 自动化网络审查工具 - OSCHINA - 中文开源技术交流社区

Color Safe - accessible web color combinations

JavaScript | CSS-Tricks - CSS-Tricks

Operator Lookup - Search JavaScript operators

Flexbox Froggy - A game for learning CSS flexbox

Grid Garden - A game for learning CSS grid | Codepip

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

"align-items" | Can I use... Support tables for HTML5, CSS3, etc

Live Server - Visual Studio Marketplace

https://developer.mozilla.org/en-US/docs/Web/Events

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://github.com/collections/javascript-game-engines

Microsoft Azure PlayFab &vert; Full Stack LiveOps, Real-time Control

https://codepen.io/gsarig/pen/gOwXpRa

iView / View Design 一套企业级 UI 组件库和前端解决方案

https://github.com/nuxt/nuxt.js

https://github.com/kazupon/vue-i18n

Layout 布局 (组件) - Element UI 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云

https://iviewui.com/components/pro/word-count

渐进式网络应用程序 - Webpack 中文文档 - 开发文档 - 文江博客

webpack 中使用 workbox 实现 PWA_webpack workbox!-CSDN博客

https://unpkg.com/electron-releases@3.646.0/lite.json

https://github.com/docmirror/dev-sidecar

GitHub - RelaxedJS/ReLaXed: Create PDF documents using web technologies

GitHub - jzj1993/jquery.popup: 一款简单易用的网页弹窗插件


创作不易,小小的支持一下吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue面试题一

一、请解释Vue.js是什么&#xff1f; Vue.js 是一个构建用户界面的渐进式框架。它的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;也便于与第三方库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 以下是 Vue.js 的一…

MySQL 5.7详细下载安装配置教程(MySQL 5.7安装包)_mysql5.7的安装教程

记录MySQL 5.7 的下载安装教程&#xff0c;并提供了Mysql 安装包 &#xff0c;以下是详细下载安装过程。 一、下载Mysql安装包 网盘下载&#xff1a; 下载MySQL 5.7安装包&#xff0c;网盘下载地址&#xff1a;点击此处直接下载 官网下载&#xff1a; 进入官网&#xff0c…

为什么选择Python作为AI开发语言

为什么Python适合AI 在当前的科技浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最热门的话题之一。无论是自动驾驶、智能推荐还是自然语言处理&#xff0c;AI都在不断改变我们的生活。而在这场技术革命中&#xff0c;Python作为主要的编程语言之一&#xff0c;…

python-win10跑通chattts笔记(亲测可跑)0.8.010

python-win10跑通chattts笔记-亲测可跑 背景项目地址安装过程使用技巧参考链接背景 克隆了项目中的代码,在无conda环境下使用pip安装了依赖,最后报错cl: 命令行 error D8021 :无效的数值参数“/Wno-register” error: command C:\,最后通过使用conda解决了,以此记录下 项…

构建LangChain应用程序的示例代码:27、FLARE:前瞻性主动检索增强生成技术实现与应用的示例

FLARE&#xff1a;前瞻性主动检索增强生成 这个示例是前瞻性主动检索增强生成&#xff08;FLARE&#xff09;的实现。 请查看原始仓库。 基本思想是&#xff1a; 开始回答问题如果开始生成模型不确定的标记&#xff0c;查找相关文档使用这些文档继续生成重复直到完成 在查…

【设计模式】行为型设计模式之 迭代器模式

介绍 迭代器模式&#xff08;Iterator Pattern&#xff09; 是行为设计模式之一&#xff0c;它提供了一种访问集合对象&#xff08;如列表、数组或其他集合结构&#xff09;中元素的方式&#xff0c;而不需要暴露集合的内部结构。迭代器模式定义了一个迭代器接口&#xff0c;该…

沪深历史行情下载,金融数据库查询

行情在线测试 在线测试 历史行情 jvQuant提供2008创立至今的历史股票行情数据&#xff0c;包含沪深主板、科创板、创业板&#xff0c;股票日内行情。 下载地址 http://jvquant.com/query/history?&token<token>&year<数据年份>.zip Copy 例:下载20…

K8S - 用kubectl远程访问内网的k8s集群

在之前的文章 K8S - 在任意node里执行kubectl 命令 介绍过&#xff0c; 通过任何node 的主机&#xff0c; 用kubectl 管理集群是很简单 无非就是两个步骤: 下载 k8s master 上的admin.conf在当前主机配置 K8SCONFIG 环境变量指向 下载的config file 其他内网主机也适用 其…

【Tools】探索动态隧道代理与普通代理:它们是什么,有何不同?

我已经从你的 全世界路过 像一颗流星 划过命运 的天空 很多话忍住了 不能说出口 珍藏在 我的心中 只留下一些回忆 &#x1f3b5; 牛奶咖啡《从你的全世界路过》 在互联网的世界中&#xff0c;代理服务器&#xff08;Proxy Server&#xff09;是一个重要的…

打字侠是一款PWA网站,如何下载到电脑桌面?

嘿&#xff0c;亲爱的键盘侠们&#xff01; 你是否还在为寻找一款好用的打字练习工具而烦恼&#xff1f;别担心&#xff0c;今天我要给大家介绍一位超级英雄——打字侠&#xff01;它不仅是一个超级酷的打字练习网站&#xff0c;还是一款PWA&#xff08;渐进式网页应用&#x…

在LUAT中使用MQTT客户端,游戏脚本,办公脚本自动操作

本文将介绍在LUAT中工程化使用MQTT客户端的方法及注意事项。实验平台为合宙AIR724UG&#xff0c;其固件版本为Luat_V4001_RDA8910_FLOAT_TMP。 面向对象 使用middleclass库为脚本提供基础面向对象支持&#xff0c;将此repo中的middleclass.lua文件添加到项目中即可使用。middl…

链路聚合LACP

#交换设备 链路聚合 理解链路聚合配置&#xff08;LACP) 什么是LACP LACP&#xff08;Link Aggregation Control Protocol&#xff0c;链路聚合控制协议&#xff09;是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议&#xff0c;它是链路聚合中常用的一种协议。…

WEB-Wordlist-Generator:为扫描后的Web应用生成相关联的字典

关于WEB-Wordlist-Generator WEB-Wordlist-Generator是一款功能强大的字典生成工具&#xff0c;该工具旨在帮助广大研究人员扫描目标Web应用程序并生成与之相关联的字典文件&#xff0c;从而允许我们对相关的网络威胁行为执行预备性应对策略。 功能介绍 当前版本的WEB-Wordli…

微服务之远程调用

常见的远程调用方式 RPC&#xff1a;Remote Produce Call远程过程调用&#xff0c;类似的还有 。自定义数据格式&#xff0c;基于原生TCP通信&#xff0c;速度快&#xff0c;效率高。早期的webservice&#xff0c;现在热门的dubbo &#xff08;12不再维护、17年维护权交给apac…

【5minC++基本功】——左值与右值|左值引用与右值引用

【5minC基本功】——左值与右值|左值引用与右值引用 1. 为什么要学习左值与右值?2.左值和右值的概念2.1 什么是左值?2.1.1 常见的左值 2.3 什么是右值?2.3.1 常见的纯右值2.2.2 什么是将亡值2.2.3 产生将亡值的情形 1. 为什么要学习左值与右值? C当中的值语义: GC(Garbage…

R语言统计分析——数据集概念和数据结构

参考资料&#xff1a;R语言实战.第2版 1、数据集的概念 数据集通常是由数据构成的一个矩形数组&#xff0c;行表示观测&#xff0c;列表示变量。 不同行业对于数据集的行和列叫法不同。统计学称为观测&#xff08;observation&#xff09;和变量&#xff08;variable&#xff…

动态规划(多重背包+完全背包)

P2851 [USACO06DEC] 最少的硬币 G 题解&#xff1a;从题目上看到那个有n种不同的货币&#xff0c;对于买家来说每个货币有C[ i ]个&#xff0c;是有限个数的&#xff0c;但是对于卖家来说 每个货币都是无限的&#xff0c;题目中要我们求的是买到这个物品的最小交易的货币数&…

[Vue-常见错误]浏览器显示Uncaught runtime errors

文章目录 错误描述正确写法具体如下 错误描述 当前端代码发生错误时&#xff0c;浏览器中出现以下错误提示。 正确写法 显然这不是我们所期望的&#xff0c;在vue.config.js中配置如下设置关闭Uncaught runtime errors显示 devServer: {client: {overlay: false}具体如下 …

Nvidia的成功与竞争:CEO黄仁勋的自信与挑战

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

计算机操作系统基础知识:操作系统体系结构图,操作系统的内核,大内核与微内核的区别和优缺点,时钟管理,原语

1.操作系统体系结构图&#xff1a; 2.操作系统的内核&#xff1a; 时钟管理&#xff1a;利用时钟中断实现计时功能。 原语&#xff1a;原语是一种特殊的程序&#xff0c;具有原子性。也就是说&#xff0c;这段程序运行必须一气呵成&#xff0c;不能被中断。 ubuntu、centos的…