VUE + nodejs实战

BVDN搭建
bash 复制代码
D:
cd nodejs
::npm install bootstrap
::npm install jquery
::npm install popper.js
::npm install vue
npm install vue-router
pause
app.html
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
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: 一款简单易用的网页弹窗插件


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

相关推荐
abigale033 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者22 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile26 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399729 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊34 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火34 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码