[Vue+NodeJS] vue routing and NodeJS environment construction (Windows version)

1. Vue routing

1. What is Vue routing?

Vue routing is a routing manager used to implement single page applications ( SPA )         in the Vue.js framework . It allows you to create navigation between multiple pages and dynamically load different components through changes in the URL . Vue routing defines page navigation rules in a declarative manner and provides some built-in navigation components and functions, such as routing links, routing views, and navigation guards .

        Through Vue routing, you can define components corresponding to different paths, and then use routing links in the page to trigger corresponding page switching. Vue routing also supports dynamic route parameters, query parameters, and nested routes , allowing you to build complex application navigation structures and switching logic between pages.

        Vue routing also provides the function of navigation guard, which can perform some logical operations before or after routing switching, such as verifying user identity, processing routing transition effects , etc.

        Vue routing is the core tool in the Vue.js framework to implement page navigation and component switching, making it easier and more efficient to build interactive and smooth single-page applications .

1. 1. What is SPA?

A single page web application (SPA) is an application with only one web page.

Is a web application that loads a single HTML page and dynamically updates that page as the user interacts with the application

   Single page application:

     Only the first time the page will be loaded, each subsequent request will only obtain the necessary data. Then, the data obtained by parsing the js in the page will be displayed on the page

   Traditional multi-page application:

     For traditional multi-page applications, each request to the server returns a complete page.

   Advantage

     Reduced request volume, accelerated page response, reduced pressure on the server, and better user experience

2. Vue routing ideas and examples

2.1. Ideas

Routing ideas

Make sure to introduce the js dependency of Vue.vue-router

First you need to define components (that is, to display different page effects)

Need to put different components into a container (routing collection)

Assemble a collection of routes into a router

Mount the route into the Vue instance

Define anchor point

Jump

2.2. Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <!--    导入router js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--触发路由事件按钮-->
    <router-link to="/index">首页</router-link>

    <router-link to="/home">介绍</router-link>

    <!--    定义锚点/路由内容-->
    <router-view></router-view>
</div>
</body>
<script type="text/javascript">
    // 定义两个组件

    var Index = Vue.extend({
        template: '<div>这是一个首页</div>'
    });
    var Home = Vue.extend({
        template: '<div>这是一个介绍666</div>'
    });
    // 定义组件与路径对应关系
    var routes = [{
        component: Index, path: '/index'
    }, {
        component: Home, path: '/home'
    }];
    // 通过路由关系获取路由对象 router
    var router = new VueRouter({routes});
    new Vue({
        el: '#app',
    // 将路由对象挂载到vue实例中
        router
    })
</script>
</html>

Effect demonstration

2. Node environment construction

1. What is Node.js

Node.js is a JavaScript runtime environment built on the Chrome V8 engine that uses an event- driven, non-blocking I/O model ; it allows JavaScript to run on the server side, making JavaScript compatible with PHP, Python, Perl, and Ruby. A scripting language on par with server-side languages .

Compared with traditional JavaScript running environments (such as browsers), Node.js has the following characteristics:

Event-driven : Node.js uses an event-driven, non-blocking I/O model, making it more efficient when handling a large number of concurrent requests.
Single-threaded : Node.js runs in a single-threaded manner, but through the event loop mechanism and asynchronous operations, it can handle a large number of concurrent requests without blocking other operations.
Cross-platform : Node.js can run on multiple platforms, including Windows, Linux, and macOS.
Lightweight and efficient : The runtime environment of Node.js has a smaller memory footprint and higher processing performance than traditional server-side languages such as Java and PHP.

Node.js can be used to build various types of applications, including website backends, command line tools, real-time communication applications, API servers, etc. It provides a rich standard library and third-party modules, allowing developers to quickly build high-performance applications.

Summarize

Node.js is a runtime environment for running JavaScript on the server side. Through its event-driven non-blocking I/O model, it makes building high-performance network applications easier and more efficient.

2. What is npm

        npm is actually the package manager for Node.js. It is a tool for managing and sharing open source JavaScript code modules.

Through npm, developers can easily introduce, install, update and delete various JavaScript modules         in their projects . npm provides a huge module warehouse that contains tens of thousands of open source modules covering various functions and uses. Developers can search for the required modules through npm and add them to their projects.

        Managing modules with npm is very simple. By entering the corresponding commands in the command line, you can complete operations such as module installation, uninstallation, and update. npm also provides a complete dependency management system that can automatically resolve dependencies between modules to ensure that the project can run normally.

        npm is more than just a module management tool, it is a community and ecosystem. Developers can publish their JavaScript modules to the npm repository for other developers to use and contribute. Through npm, developers can easily share code with other developers, solve problems, and learn about open source projects .

        Summary: npm is a package manager for Node.js, used to manage and share JavaScript code modules. It simplifies the module installation and management process, making JavaScript development more efficient and convenient.

3. Environment construction

3.1. Download node.js

Download the corresponding version, I use the Windows version | Node.js (nodejs.org) https://nodejs.org/zh-cn/download

3.2. Decompression

Unzip the downloaded Node.js to your own path, and do not change the location later. I have two versions here, but it does not affect it. You can choose it according to your needs.

Then manually create two files node_global and node_cache in the decompressed directory.

New directory description
node_global : npm global installation location
node_cache : npm cache path

3.3 Configure environment variables

Enter the computer's advanced system settings to configure environment variables

Added NODE_HOME : find the directory you decompressed

Modify PATH and add at the end: %NODE_HOME%;%NODE_HOME%\node_global;

Test whether the installation is successful: win+R open the cmd window, and output the following command to output the version numbers of NodeJs and npm.

node -v

npm -v

Some computers will generate a node_global folder when configuring environment variables .

If not, you need to manually create a node_global folder yourself.

3.4. Configure npm global module path and cache default installation location

Open cmd and execute the following commands separately:

npm config set cache "your installation path\node_cache"
npm config set cache "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_cache"
npm config set prefix "your installation path\node_global"
npm config set prefix "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"
Connect node_global ( npm global installation location ) and node_cache ( npm cache path ) created in step 1 with npm

If the execution of the command is stuck, you can delete C:\Users\username\.npmrc and execute it again. (Username: is the username of the current computer)

"D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global", double quotes cannot be missing

After executing the first command, two files will be generated, one in the node_cache folder and one in the user

3.5 Modify npm image to improve download speed

You can use cnpm or set --registry directly. It is recommended to set --registry.

3.5.1 --registry

Set up Taobao source
npm config set registry https://registry.npm.taobao.org/
View sources, you can see all the sources that have been set
npm config get registry

In fact, the content of this step is to add the following code to the C:\Users\username\.npmrc file

registry=https://registry.npm.taobao.org

3.5.2 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

After cnpm is installed, you can use the cnpm command instead of the npm command. At this time, npm will still use the official image, and cnpm will use the domestic image.
If you want to restore to the original settings, do the following:
```
npm config set registry https://registry.npmjs.org/
```

3.6 Verify installation results

Check npm global path settings
In this step, you can just install a module globally and you can evaluate it.
npm install webpack -g
After the above command is executed, the following file will be generated:
%node_home%\node_global\node_modules\webpack
Note: Don’t worry if a warning occurs during the downloading process. If an Error occurs, delete the downloaded broken file and download it again.

4. Test Node

Find a Node project, or use your own Node project. I will use a Node project here to conduct a test.

Enter the root directory of our Node project and follow the figure below to

enter the npm i command and wait for it to load.

You can see the time it takes.
After the command is executed, there will be an additional node_modules folder in the root directory of the project, which contains the modules downloaded from the npm remote library and then "installed" into your project.

Enter the command to start the project
npm run dev
Wait quietly for it to load, and finally it starts successfully.