Environment configuration of Vue routing and nodes

1. Vue routing

What is Vue routing?

Vue routing is part of Vue.js and is an official Vue.js plugin for managing routing for single-page applications. It allows you to use URL paths and parameters in your application to manage different page views without refreshing the page. Using Vue routing, you can easily set up and manage client-side routing, including nested and dynamic routing. It also provides advanced features such as route guards to perform additional logic when navigating between pages or when accessing restricted pages.

core

The core of Vue routing is a VueRouter instance, which can be created from a Vue.js application's component and route definitions. A route definition contains a set of routing rules, each rule specifying a URL path and corresponding Vue.js component. When the user browses to the specified path, Vue routing will find the corresponding component according to the routing rules and load it, thereby switching to a new view in the application.

Code demo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>Vue路由</title>
	</head>
	<body>
		<div id="app">
		<router-link to="home">首页</router-link>
			<router-link to="about">关于</router-link>
			<router-view></router-view>
		</div>
<Script type="text/javascript">
	//定义两个组将
	var Home=Vue.extend({
		template:'<div>网站首页。。。。</div>'
		});
		var About=Vue.extend({
			template:'<div>网站发展。。。。。。</div>'
			});
			//2.定义组件与路基对应关系
	var routes=[{
		component:Home,
		path:'/home'
		},
		{
			component:About,
			path:'/about'
			
		}];
		//3.通过路由关系获取路由对像
		var router = new VueRouter({routes});
		//4.将路由对象挂载到路由对象
		
	new Vue({
		el:'#app',
		router,
		data(){
			return{
				msg:'xzs'
			}
			}
		})
	
	
	
	
</Script>
	</body>
</html>

Effect:

Click on homepage

Click About

2. Environment configuration of node.js

What is nodejs?

Node.js is a JavaScript running environment based on the Chrome V8 engine. It uses an event-driven, non-blocking I/O model to make it lightweight and efficient in handling concurrent requests. Node.js can be used for server-side programming, command-line tools, and client-side programming.

Features of nodejs

Non-blocking I/O: suitable for processing high concurrent requests.
Processing data: Node.js is ideal for processing data-intensive real-time applications.
Lightweight: It is very fast because it runs on the V8 engine using JavaScript.
Modularity: Its modularity mechanism allows developers to expand applications more conveniently, and the reusability of code is also improved.

download

Since the Node.js platform runs JavaScript code on the backend, the Node environment must first be installed on the local machine.

下载 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn/download/

Node.js supports multiple operating system platforms, such as Windows, Linux, macOS, etc. Just download the corresponding version from the official website and follow the prompts to install it.

For example: Mine is a windows system, so I choose windows, 64-bit;

Configuration

Extract the downloaded file to the specified path ( the path cannot contain Chinese characters ) and create it in the decompressed directory

node_global (npm global installation location)

and node_cache (npm cache path) these two directories

Environment variable configuration:

NODE_HOME: The root path configured for nodeJS decompression is: D:\tools\node-v10.15.3-win-x64

Add path:

PATH：%NODE_HOME%
PATH：%NODE_HOME%\node_global

Open cmd test

Enter node -v, npm -v

Configure npm global module path and cache default installation location

Open cmd and execute the following commands separately: Replace the path with your own path

Install Taobao image

Enter in cmd: npm config set registry https://registry.npm.taobao.org/

After success, you will see a .npmrc file under User on the c drive.

Check npm global path settings

Enter npm install webpack -g in cmd

After the above command is executed, the following file will be generated:

Run the downloaded Node.js project

Prepare a project without downloading js, then go to the doc interface of the root directory of the project, enter the npm i command, and download the dependencies

Finally enter the npm run dev command to start running the project