dat.gui在vue中的引入

dat.gui在vue中的引入

dat.gui库

官方站点：http://workshop.chromeexperiments.com/examples/gui/

Dat.gui 使用教程：Dat.gui 是一个 GUI 组件，他可以为你的 demo 提供参数的设置。并且很容易上手。
具体的使用教程参考：https://www.cnblogs.com/xiaoniuzai/p/6685556.html

关于Vue中的引入

Vue中有关Js插件库的引入对于新手来说是一个头痛的事情，项目交互涉及到UI设计，使用dat.gui要比bootstrap手写更为方便，无奈在网上查找并没有找到关于dat.gui的引入方法。无奈只能自己尝试去实现
其实，Vue中关于js插件库引入方法很多，举一反三即可

cnpm或npm安装dat.gui

跳转到项目路径下，同安装其他插件库一样运行指令：
npm install dat.gui
网络环境差的推荐使用cnpm install dat.gui
安装成功后node_modules文件夹内会生产dat.gui的文件夹

修改main.js

打开项目中main.js添加引入。
import ‘…/node_modules/dat.gui/build/dat.gui.js’;
import ‘…/node_modules/dat.gui/build/dat.gui.css’;
值得一提的是dat.gui的css设置可以直接修改这个css，自己做的时候忘记添加了，弄了半天才反应过来

在组件中添加在你要使用dat.gui的vue组件中添加语句

import dat from ‘dat.gui’
即可使用dat.gui辣