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: 一款简单易用的网页弹窗插件


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

相关推荐
幻灵尔依1 天前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子1 天前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳1 天前
CSS 基础概念
前端·css·css3
前端小巷子1 天前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar1 天前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫21 天前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun1 天前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙1 天前
React Hooks 详解
前端·javascript
南囝coding1 天前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩1 天前
useCallback useMemo memo 三个区别和作用
前端·react native