Vue环境组件node.js安装

原创于 2025-08-23 09:19:13 发布 · 704 阅读

12 ·

CC 4.0 BY-SA版权

@Stringzhua

文章标签：

#vue.js #node.js #前端

Vue2 专栏收录该内容

8 篇文章

订阅专栏

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 等命令时，会从这个镜像地址下载软件包，从而加快下载速度。