【vux】怎么使用vux

浅浅的花香味﹌ 2022-10-06 04:52 263阅读 0赞

> `前言`

官网：[https://doc.vux.li/zh-CN/][https_doc.vux.li_zh-CN]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]  
vux是干嘛的？  
官网自述  
![在这里插入图片描述][20210611103706143.png]  
网上介绍  
[https://www.zhihu.com/question/49398668][https_www.zhihu.com_question_49398668]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]  
总结：也就是说，如果是做微信相关的，要画的界面是类似微信的，推荐用这个。  
我以前也做过微信，不过那时候是用h5，ui是用的weui。而它这个是用vue的方式来实现的。这就是我对它的简单理解。另外，它里面还集成了一些相关的微信接口吧，这个如果后面开发有用到，那就先看文档了，没有的话，就自己另外写。

> `开始`

1.  首先，集成vux  
    如果是新项目，可以直接通过官网的步骤来创建项目，这样的话里面的vux的相关配置是已经配好的，自己就不用改动了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 2]  
    如果是集成vux，可以另外百度搜索，这个看了下，不是很难。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 3]  
    我这边是新项目，所以就直接使用官网的方式了  
    作为新项目，我这边配置了如下内容：
    
     *  js中单引号变双引号，
     *  以及关闭js函数的括号前的空格验证，
     *  因为要在手机端测试页面效果，所以也配置了同时支持localhost和ip访问  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 4]
2.  然后开始画界面  
    按习惯的话，画页面都是需要什么，直接看官方文档示例，把代码复制过来。  
    点击组件，下面会有示例。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 5]

> `体会`

这是vux官方文档  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 5]  
槽点1：右边示例完全看不到每个组件对应什么样子，是没有盈利都不维护了么(毕竟咱是白嫖，咱也资格质问)  
槽点2：每个组件的示例代码，有的组件有，有的组件没有  
槽点3：上面的[demo原始链接][demo]，打开后如果不设置一些东西还不能在谷歌直接访问，需要再打开个浏览器才能看到效果(如果其他可以的话，这个其实还能接受的)  
槽点4：示例效果里面的每个组件，都不知道干嘛的，这个要怪我英文不好咯?  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 6]  
建议：之前做小程序，用的HBuild，里面做的好的也有colorui。别人那做的就挺好的，无论示例，还是文档。  
并且，在这次开发的时候也看了下其他的ui，比如vant：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 7]  
看别人这文档多详细。  
虽然使用vux的大多是开发微信的，但是实在没必要做成这样子。  
这是最上面的链接里面的一个评论：  
![在这里插入图片描述][20210611105514402.png]  
真是除非开发微信，要用到微信风格的页面，否则，我是不会选择vux的。  
我是后端，在写前端的过程中，也看到过一些后端开发写的前端页面，写的也是特别乱，好像就是只写这一次，也无所谓乱不乱了。这个文档给我的感觉就是一个后端写的…我看过我们公司前端写的代码，那是挺整洁的。  
好了，框架搭好了，到此为止了。下面换其他ui

> `资源`

搭好的vux框架模板，使用的是官方的方式，版本2.x。  
因为这次决定不用这个了，所以也没添加一些配置，以及封装，就一个光杆项目。  
git提交注释可以看到具体修改了哪些  
[https://gitee.com/xueyedangkong/vux-project-template.git][https_gitee.com_xueyedangkong_vux-project-template.git]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 8]

[https_doc.vux.li_zh-CN]: https://doc.vux.li/zh-CN/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20221005/5cadf97e466540feb93b2a41ff04f8ed.png
[20210611103706143.png]: /images/20221005/bba69876b34e4815afca818a7d1f01d1.png
[https_www.zhihu.com_question_49398668]: https://www.zhihu.com/question/49398668
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 1]: /images/20221005/43da73c8e1ad42baa01521ed7fc36521.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 2]: /images/20221005/5b4c6f9fde224a9e8290e4cab0adc8d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 3]: /images/20221005/0b70ccfefb0244d89bc2528965957a22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 4]: /images/20221005/d57a9150068544ff93e976f5a9921bf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 5]: /images/20221005/2855171fb0b34162bde552ae878dfbdf.png
[demo]: https://vux.li/demos/v2/#/component/selector
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 6]: /images/20221005/120fac8a32f8499fba0208bff955d663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 7]: /images/20221005/d6fc20f5b7754aac9a70b6fd6570feb2.png
[20210611105514402.png]: /images/20221005/5714a0967c0147cf9b78e2e15f4bfa9e.png
[https_gitee.com_xueyedangkong_vux-project-template.git]: https://gitee.com/xueyedangkong/vux-project-template.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70 8]: /images/20221005/9cc0d94cd95b4cc9bb48feab1575b328.png