当前位置：首页 > news >正文

Vue环境组件node.js安装

news 2025/8/24 7:57:50

1.组件：

1.概述：

我们之前了解过vue是一个单页面框架，但在实际开发中，一个项目不可能只有一个页面，所以除了vue实例绑定的页面之外，其余的项目都要以组件的形式进行注册到主页面中，才可以进行展示渲染；

2.案例分析：

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h3>{{msg}}</h3><school></school></div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">const student = Vue.extend({template: `<div><h2>名称：{{ stuName }}</h2><h2>年龄：{{ 20 }}</h2></div>`,data() {return {stuName: '张三',age: 20}}})/*** 命名：*  //多个单词*     my-school*     mySchool*/const school = Vue.extend({template: `<div><h2>名称：{{ name }}</h2><h2>地址：{{ address }}</h2><student></student></div>`,data() {return {name: '猿究院',address: '北大街'}},components: {//注册组件student}})console.log(school);//3.创建Vue对象let vm = new Vue({data() {return {msg: '这是一段消息'}},components: {//注册组件school}}).$mount("#root");
</script>
</body>
</html>

解析：在上面案例中，我们自定义了两个组件school和student，并将student组件注册到school组件中，又将school组件注册到vue实例中，最后再将vue实例中的所有数据在绑定的div容器页面上进行渲染展示；

我们在案例中往控制台上述除了school，发现此时school也不再是个对象，而是一个组件，正好符合了我们的预期；

2.node.js

1.概述：

Node.js 是一个强大的 JavaScript 运行时环境，具有高效的性能、丰富的应用场景和活跃的社区。无论是开发 Web 应用、实时应用、命令行工具还是微服务架构，Node.js 都是一个值得考虑的选择。

2.安装步骤：

1.下载：

 <font style="color:rgba(0, 0, 0, 0.85);">Node.js 的官方下载网址是：</font>[https://nodejs.org/](https://nodejs.org/)<font style="color:rgba(0, 0, 0, 0.85);">。</font>

2.安装：

  下载完成后选择合适路径进行安装；

3.配置环境变量

 安装完成后在环境变量中添加系统变量及path路径添加环境变量![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1732192423761-f7d3d8b3-3d1f-46eb-bc77-f2f16806d42b.png)

配置path路径：

4.检查安装情况

进入doc界面，输入指令node --version查看

当出现版本信息就说明安装完成

5.配置软件报注册中心：

以管理员身份进入DOS界面，输入下面指令进行配置

npm config set registry https://registry.npmmirror.com/

默认情况下，npm 从官方的注册中心（https://registry.npmjs.org/）下载软件包。但在国内，由于网络环境等因素，直接从官方源下载可能速度较慢。https://registry.npmmirror.com/ 是淘宝提供的一个 npm 镜像源，通过将注册中心设置为该镜像源，在后续执行 npm install 等命令时，会从这个镜像地址下载软件包，从而加快下载速度。