npm 安装color.js

JavaScript06

npm 安装color.js,第1张

最近,看vue文档动画的时候,发现有个地方引入了color-js

但是,我想用npm的方式引入。

于是,我执行了npm install color --save-dev

可是,却报错了,说toCSS() 不是一个function。

于是,我给人家提了个issue。作者很快回复我了。

后来,我才发现,这根本不是我要的那个color。

我想要的是这个:

https://github.com/brehaut/color-js

又跟人作者纠结好久,后来也没解决。

后来过了好几天,我灵机一动,我可以让他直接从github上拉啊

于是我在项目的package.json中devDependencies下面加入了这行,

ok,可以了,不报错了。

ps.突然发现,写的时候三言两语都写完了(大部分都是废话),解决的时候我可真是纠结了好几天啊。。。

1、安装 ant-design-vue

npm i ant-design-vue --save

2、在 main.js 中引入

3、安装 antd-theme-generator , less 插件

npm i antd-theme-generator --save

npm i less --save

npm i less-loader --save

4、在 src 目录下新建 styles 文件夹,里面新建 index.less , variables.less 文件

variables.less 内容

index.less 文件为空

5、项目根目录下新建 color.js 文件

6、在 publish 文件夹下 index.html 文件中添加以下行,必须添加到 body 下

7、修改 package.json 的启动和打包指令

8、使用

原理:通过 window.less.modifyVars 方法,去动态的改变 less 变量。然后在调用 color.js ,在 pulish 中生成一个 color.less 文件,在 index.html 中重新引入一下,就实现了动态换肤功能。

ok,功能实现,结束。