526互联

Vue利用element ui分栏，并将threejs插入到main

发布时间 2023-07-20 11:14:14作者: Z朱子泉

目录

Vue利用element ui分栏，并将threejs插入到main(主要内容区)

1.在node.js官网下载

image-20230720094531636

2.在win+r中输入cmd打开管理员：命令提示符

验证node.js有没有安装成功

image-20230720094752175

3.cmd命令下载安装淘宝镜像上的npm包

image-20230720095057581

4.cmd命令安装vue cli，并验证是否安装成功

image-20230720095552085

5.通过vue ui命令以图形化界面创建和管理项目

image-20230720095950275

新建文件夹，创建新项目

image-20230720100341682

6.vue项目创建完成，在终端里安装element ui

npm i element-ui -S

image-20230720101336331

7.在main.js文件中引入element

import Vue from 'vue';

import App from './App.vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';


Vue.use(ElementUI);


new Vue({

 render: (h) => h(App),

}).$mount('#app');

8.利用element进行分栏布局

在src/components/目录下新建名为Header.vue、Aside.vue和Main.vue的组件文件

image-20230720102350918

头部（Header）、侧边栏（Aside）和主要内容区（Main）的组合，分别在里面编写需要内容

头部（Header）：顶栏容器

<template>
  <div class="header">
    <el-row>
      <el-menu default-active="activeIndex" mode="horizontal">
        <el-menu-item index="1"> 首页 </el-menu-item>
        <el-menu-item index="2"> 新闻 </el-menu-item>
        <el-menu-item index="3"> 论坛 </el-menu-item>
        <el-submenu index="4">
          <template slot="title">常用功能</template>
          <el-menu-item index="4-1">选项1</el-menu-item>
          <el-menu-item index="4-2">选项2</el-menu-item>
          <el-menu-item index="4-3">选项3</el-menu-item>
          <el-submenu index="4-4">
            <template slot="title">选项4</template>
            <el-menu-item index="4-4-1">选项1</el-menu-item>
            <el-menu-item index="4-4-2">选项2</el-menu-item>
            <el-menu-item index="4-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style>
.header {
  height: 60px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

侧边栏（Aside）：侧边栏容器

<template>
  <div class="aside">
    <el-container>
<el-aside>
<el-menu default-active="1">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<eL-menu-item-group title="分组2">  
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
  </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Aside',
};
</script>

<style>
.aside {
  background-color: #e6f7ff;
  height: calc(100vh - 60px);
}
</style>

主要内容区（Main）：主要区域容器，threejs内容在这里编写

<template>
  <div class="main">
    <div ref="canvasContainer" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as THREE from "three";

export default {
  mounted() {
    this.initThreeScene();
  },
  methods: {
    initThreeScene() {
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(
        this.$refs.canvasContainer.clientWidth,
        this.$refs.canvasContainer.clientHeight
      );
      this.$refs.canvasContainer.appendChild(renderer.domElement);

      // 创建场景
      const scene = new THREE.Scene();

      // 添加平行光源
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        this.$refs.canvasContainer.clientWidth /
          this.$refs.canvasContainer.clientHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      // 创建物体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 设置场景背景色为浅灰色
      scene.background = new THREE.Color(0xdddddd);

      // 渲染函数
      const animate = function () {
        requestAnimationFrame(animate);

        // 物体旋转
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      // 开始渲染
      animate();
    },
  },
};
</script>

<style>
.main {
  flex: 1;
}
</style>

9.最后在App.vue进行汇总

<template>
  <div id="app">
    <Header />
    <div class="container">
      <Aside />
      <Main />
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';
import Aside from '@/components/Aside.vue';
import Main from '@/components/Main.vue';

export default {
  components: {
    Header,
    Aside,
    Main
  }
};
</script>

<style>
.container {
  display: flex;
  height: calc(100vh - 60px); /* 60px 是头部的高度 */
}
</style>

  • template： 这部分定义了组件的模板，即在组件被使用时将呈现的HTML标记。这段代码包含一个名为app的根元素，其中包含了Header、Aside和Main这三个子组件。div和自定义标签<Header/>、<Aside/>以及<Main/>。这些自定义标签实际上代表了其他组件，它们通过import语句引入到了这个组件中。

  • script：这部分包含了组件的JavaScript代码，用于定义组件的行为和逻辑。这里使用了import语句引入了名为<Header>、<Aside>和<Main>的三个组件，它们分别对应之前模板中的自定义标签。export default语句将这个组件对象导出，以便在其他地方使用。

  • style：这部分包含了组件的样式规则。这段样式规则定义了一个.container类，它被应用在模板的div class="container”标签上。该样式将使得这个容器类使用Flex布局，并将其高度设置为视口高度减去60像素，即视口高度减去头部高度。

10.最后在终端中输入，页面完成

npm run serve

image-20230720110040238

image-20230720105433094