大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库。其中,UIkit组件库是一款基于Less+JS的一款轻量级、模块化、响应式的前端UI组件库。特别是,从版本3.0.0 beta 31开始完全脱离了jQuery框架。
UIkit组件库的一个重要特点是,其提供的组件大部分是非常基础性的,但是也有一部分组件相当实用,例如Slideshow组件、Upload组件、Video组件等,在github网站上的评价星数是13K,相当不错。
另一个vuikit库尚非常年轻,其目标是基于流行的UIkit打造针对Vue.js的组件库。建议目前先不要选择这个。
有关最新的Vue框架中使用UIkit库的资料在网络上极其少见。本人经过几天的分析实验总结了在目前最新的Vue CLI 3开发中使用UIkit 3组件库的基本思路。有了这个基本示例,结合你所熟悉的Vue开发技巧,就能快速实现常见的基于Vue前端框架的项目。
这个Vue官方网站上和其他许多地方都有介绍,非常简单,此处不再赘述。
你可以使用:
npm install -g @vue/cli
或者:
yarn global add @vue/cli
但是,安装之前,官方资料强调必须先卸载以前的版本,命令如下:
yarn global remove vue-cli
Vue CLI 3与Vue CLI 2大不一样了。因此,很多网站提供的教程都已经过时,仅供参考。
2. 添加UIkit组件库
在使用命令vue create <项目名称>创建一个Vue前端工程框架后,你就可以使用下面命令把UIkit组件库添加到当前Vue工程中:
yarn add uikit
为了简单起见,我们直接使用UIkit官方网站上提供的例子作为说明(主要介绍步骤)。
代码如下:
>
请特别关注上述代码中的加粗部分!
修改后完整的代码如下:
**
**
再强调一下,我直接使用了UIkit官方网站上关于form组件的基本示例代码,如下:
注意到,与上面模板部分代码的区别是,我添加了和 我使用的是WebStorm IDE。于是,在系统内置的命令行下运行: yarn serve启动对项目的热编译和内置Web服务器。然后,再Google Chrome中打开http://localhost:8080/,效果如下图所示: 1,https://github.com/vuikit/vuikit 另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。三、运行效果
参考
2,https://github.com/uikit/uikit
3,https://vuejs.org/
分享题目:VueCLI3开发中试用UIkit3组件库-创新互联
网页路径:http://dzwzjz.com/article/dpoghs.html