VUE + nodejs实战

news2024/11/13 9:43:03

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