Vue学习笔记

最新推荐文章于 2022-11-04 10:02:12 发布

HarSenZhao

最新推荐文章于 2022-11-04 10:02:12 发布

阅读量500

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Johnzhc/article/details/88636041

版权

本文档详细介绍了Vue的基础知识，包括使用vue-cli创建项目，以及在Vue中整合各种资源如three.js、Animate.css、ElementUI、echarts、jquery等。还分享了如何动态修改class类及使用<el-table>动态展示数据。

摘要由CSDN通过智能技术生成

4.vue使用Animate.css动效库

5.vue使用ElementUI

6.vue使用echarts

7.vue 使用jquery

8.vue 使用jquery supersized插件实现幻灯片的效果

四.vue使用知识总结

1.动态修改class类

一.vue基础知识

1.vue-cli创建项

首先你要安装vue-cli 之后在要创建项目的地方执行

vue create my-project

二 vue资源使用总结

1.vue使用three.js知识总结

1.首先执行安装three.js命令

npm install three --save

2.在之后要引入的组件中写入

import * as Three from 'three'

再引入three.js之后我们需要建立scene(屏幕)，camera(相机)，renderer(渲染器) 分别代码如下

  this.scene = new THREE.Scene() // 场景

  this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面

  this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器

我们可以对相机，和渲染器做参数调整例如

 this.camera.position.x = -20
 this.camera.position.y = 40
 this.camera.position.z = 30
 this.camera.lookAt(this.scene.position)//分别设置相机的位置和相机拍摄点位于屏幕中心
 this.renderer.setSize(window.innerWidth, window.innerHeight - 100)//设置渲染器的大小
 this.renderer.shadowMapEnabled = true // 开启阴影

我们可以建立适当的坐标系以供参考

let axes = new THREE.AxisHelper(200) // 坐标轴

如果我们想要鼠标键盘可以旋转模型的话需要引入OrbitControls引入方法为

首先先安装npm Install imports-loader and exports-loader，用于向一个模块的作用域内注入变量、从模块中导出变量。
配置webpack.base.conf.js文件,在其module中的rules[]中添加

{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “imports-loader?THREE=three”
},
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “exports-loader?THREE.OrbitControls”
}

需要使用的地方引入OrbitControls

import OrbitControls from ‘three/examples/js/controls/OrbitControls’

使用时不需要通过THREE.OrbitControls了，直接new即可

this.controls = new OrbitControls(this.camera, this.renderer.domElement)

我们还可以加入引入dat.gui 来对其进行可视化控制

只需引入即可执行以下代码

npm install dat.gui -save

最终的代码如下

<template>
  <div ref="demo1"></div>
</template>

<script>
  import * as THREE from 'three'
  import OrbitControls from 'three/examples/js/controls/OrbitControls';
  import dat from 'dat.gui'
  export default {
    name:"three",
    data: () => ({
      controls: {
        scene: null,
        camera: null,
        renderer: null,
        rotationSpeed: 0.02
      }
    }),
    created () {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      init () {
        let {initMesh, controls} = this
        const gui = new dat.GUI() // gui监测器
        gui.add(controls, 'rotationSpeed', 0, 0.5)
        initMesh()
      },
      initMesh () {
        this.scene = new THREE.Scene() // 场景
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
        this.camera.position.x = -20
        this.camera.position.y = 40
        this.camera.position.z = 30
        this.camera.lookAt(this.scene.p