12.JavaWeb-Node.js+搭建Vue项目

1.Node.js的概念

        传统的Web服务器中，每个请求都会创建一个线程，这会导致线程数的增加，从而影响服务器的性能和扩展性，Ryan Dahl借助Chrome的V8引擎提供的能力实现了Node.js——可以在服务端运行的JavaScript（可以把Node.js简单的看成JavaScript写的tomcat）

        进一步实现前后端分离

1.1 Node.js的特点

1. 异步非阻塞：Node.js采用了事件驱动和非阻塞I/O模型，使得它能够处理大量并发请求而不阻塞其他操作，从而实现高效的异步编程。

2. 单线程：Node.js使用单线程模型来处理请求，但通过事件循环和异步操作可以实现并发处理。这使得Node.js能够高效地处理大量请求，并且对于实时应用程序（如聊天应用、实时通知等）具有良好的性能。

3. 事件驱动：Node.js基于事件驱动的架构，通过注册回调函数来处理事件，当事件发生时，Node.js会触发相应的回调函数进行处理。这种模型使得编程变得简单且易于扩展。

4. 轻量和高效：Node.js的设计目标是轻量和高效，它具有较低的资源消耗，能够快速启动和响应请求。

5. 丰富的模块生态系统：Node.js拥有一个强大的模块生态系统（NPM），其中包含了大量的开源模块，可以方便地进行功能扩展和模块复用。

6. 跨平台：Node.js可以在多个平台上运行，包括Windows、Linux和Mac OS等，这使得它具有很好的可移植性和跨平台开发能力。

7. 适用于实时应用程序：由于Node.js具有高并发处理和实时性能，它非常适合开发实时应用程序，如聊天应用、游戏服务器、实时协作工具等。

2. 使用Node.js

2.1 下载并安装

Download | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en/download

2.1.1 命令框检查是否安装成功

node --version

2.2 设置淘宝镜像

​npm install -g cnpm --registry=http://registry.npmmirror.com

2.3 安装vue脚手架

npm install -g @vue/cli

2.4 初始化脚手架

npm install -g @vue/cli-init

2.5 利用脚手架搭建vue项目

        进入哪个目录项目就创建在哪

vue init webpack xxx

 2.5.1 启动项目

        进入项目所在文件地址再启动

npm run dev

3.Vue项目组件

3.1 vue项目组件构成（也是vue项目的构成）

        template定义当前组件有哪些元素，所有元素必须有统一根标签（通常是div）

        script就类似html中script，其中的export用来导出当前组件，方便其他组件调用

        style即html中的style，用来设置css，其中的scoped限制样式只作用于当前组件

<template>
    <div>

    </div>
</template>

<script>
export default{
    
}
</script>

<style scoped>

</style>

3.2 vue项目组件的调用

        一个页面要想使用一个组件要做如下操作

3.2.1 导入组件

<script>
import Top from './commons/top.vue'

3.2.2 注册组件

export default{
    components:{
            Top,
    },
}
</script>

3.2.3 使用组件

<template>
    <div>
        <Top></Top>
    </div>
</template>