Vue学习笔记

目录

一.vue基础知识

1.vue-cli创建项

二 vue资源使用总结

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

2.vue背景图为动图

3.vue使用阿里巴巴矢量库

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

最终的代码如下

2.vue背景图为动图

 

3.vue使用阿里巴巴矢量库

打开http://www.iconfont.cn/ 登陆之后，将想要的图标加入购物车之后，点击加入购物车之后去购物车下载代码，之后在assets中新建一个文件夹，将下载之后解压的文件放到新建的文件夹之下，在vue中用到图标的地方写明

引用的时候写

4.vue使用Animate.css动效库

 

1.首先先安装执行

npm install animate.css

2.在main.js里面写入

import  animate from'animate.css'
Vue.use(animate)

3.使用的时候在要加的标签上加上

class=“animated fadeInRight”

5.vue使用ElementUI

1.首先安装element执行代码

npm install npm install [email protected] -S

2.在main.js中写入代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.element使用，在要使用的组件总直接引入标签对即可。

6.vue使用echarts

1.首先你先执行安装命令

npm install echarts -S 

2.全局引用

 在main.js中写入如下代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

7.vue 使用jquery

首先先安装jquery执行

npm install jquery --save

之后在webpack.base.conf.js中添加以下代码

首先现在开头写入

const webpack=require("webpack")

之后在module.exports中写入以下代码

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

最后在main.js中作为全局引用

import $ from 'jquery'

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

首先先要安装和使用jquery 参考第六条

之后下载supersized.css和supersized.js

再在需要使用的地方引用即可如：

四.vue使用知识总结

1.动态修改class类

2.Vue运用进行表数据的动态展示

1.进行一行数据的显示

 

2.进行多行数据的显示