VUE + nodejs实战

码力码力我爱你

已于 2024-08-20 20:05:44 修改

阅读量1k

点赞数 24

分类专栏： web UI chrome 文章标签： vue.js 前端 javascript

于 2024-06-09 23:19:00 首次发布

本文链接：https://blog.csdn.net/qq_30220519/article/details/139567313

版权

UI 同时被 3 个专栏收录

31 篇文章 1 订阅

订阅专栏

web

11 篇文章 0 订阅

订阅专栏

chrome

3 篇文章 0 订阅

订阅专栏

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/