您现在的位置:首页 >> 前端 >> 内容

如何在vue-cli中配置amazeui的vue版本详解

时间:2018/1/20 13:48:53 点击:

  核心提示:问题描述:本人刚入门vue,在vue-cli中使用amazeui的vue版本配置时遇到了一些疑惑,特将解决的过程和办法记录下来amazeui自身依赖jquery,而vue全家桶完全可以替代jquery...

问题描述:本人刚入门vue,在vue-cli中使用amazeui的vue版本配置时遇到了一些疑惑,特将解决的过程和办法记录下来

amazeui自身依赖jquery,而vue全家桶完全可以替代jquery的各种功能,当我们使用vue框架进行开发时,如果想要使用amazeui,则必须再引入jquery,就显得十分冗余。近期我在开发一个网站的前端,使用vue全家桶,于是我在github上找到了几个非官方团团队开发的vue版的amazeui,分别踩了几个坑。

star数量最多,并且得到官方推荐的是https://github.com/zcoding/amazeui-vue,我自然从这个下手。

以下是几个步骤:

1、npm install amazeui-vue

2、在vue-cli项目下的package.json文件中,"devDependencies"项中添加 "amazeui-vue": "(具体的版本号)"

3、在项目的根目录下,执行npm install (将依赖模块的源代码导入到node_modules中)

4、在 /src/main.js中添加如下代码

Vue.use(require('amazeui-vue').install);

即可

5、运行npm run dev 结果大爆炸,出现了大几十处错误

如何在vue-cli中配置amazeui的vue版本详解

原因是这个amazeui-vue是基于vue1.0,而目前vue已经升到2.x,所以出现这么多错误也是正常的

第一次踩坑之后,我挑选了star数第二的https://github.com/sunshineJi/amaze-vue,这个是基于vue2.0搭建,过程同上面的类似

1、npm install amaze-vue --save

2、在vue-cli项目下的package.json文件中,"devDependencies"项中添加 "amaze-vue": "(具体的版本号)"

3、在项目的根目录下,执行npm install(将依赖模块的源代码导入到node_modules中)

4、在 /src/main.js中添加如下代码

import AmazeVue from 'amaze-vue';
import 'amaze-vue/dist/amaze-vue.css';

Vue.use(AmazeVue);

5、运行npm run dev 这次结果就是正确的了,没有报错

之后就可以根据https://sunshineji.github.io/amaze-vue-docs/#/文档使用样式和组件

最后提醒一句,这个amazeui-vue在移动端的适配不是太好,大部分组件都是针对pc端开发的,没有原生的移动端优势,同时还有一些样式上的小bug,需要在使用时自己添加一些css加以修改。

同时,我也试了试star数第三的https://github.com/zjhr/vue-amazeui,这个项目基本继承了原生的特性,较上面的项目要好很多,但是我添加后报了许多错误,同时原作者也在issue中提醒不要在生产环境中使用,原作者已经不再维护。

Tags:如何 何在 在V VU 
作者:网络 来源:踩坑小王子