12.JavaWeb-Node.js+创建Vue项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了12.JavaWeb-Node.js+创建Vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.Node.js的概念

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

进一步实现前后端分离

1.1 Node.js的特点

异步非阻塞：Node.js采用了事件驱动和非阻塞I/O模型，使得它能够处理大量并发请求而不阻塞其他操作，从而实现高效的异步编程。
单线程：Node.js使用单线程模型来处理请求，但通过事件循环和异步操作可以实现并发处理。这使得Node.js能够高效地处理大量请求，并且对于实时应用程序（如聊天应用、实时通知等）具有良好的性能。
事件驱动：Node.js基于事件驱动的架构，通过注册回调函数来处理事件，当事件发生时，Node.js会触发相应的回调函数进行处理。这种模型使得编程变得简单且易于扩展。
轻量和高效：Node.js的设计目标是轻量和高效，它具有较低的资源消耗，能够快速启动和响应请求。
丰富的模块生态系统：Node.js拥有一个强大的模块生态系统（NPM），其中包含了大量的开源模块，可以方便地进行功能扩展和模块复用。
跨平台：Node.js可以在多个平台上运行，包括Windows、Linux和Mac OS等，这使得它具有很好的可移植性和跨平台开发能力。
适用于实时应用程序：由于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项目组件的调用

一个页面要想使用一个组件要做如下操作文章来源地址https://www.toymoban.com/news/detail-522697.html

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>

到了这里，关于12.JavaWeb-Node.js+创建Vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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