VueCLI3开发中试用UIkit3组件库-创新互联

一、UIkit组件库与vuikit简介

在选择好意中的前端开发基本框架后，接下来一个重要任务就是选择一款好的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 CLI 3开发中试用UIkit组件库

1. 安装Vue CLI 3

这个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官方网站上提供的例子作为说明（主要介绍步骤）。

3. 修改App.vue根组件

代码如下：

>

请特别关注上述代码中的加粗部分！

4. 修改HelloWorld.vue组件

修改后完整的代码如下：

****

再强调一下，我直接使用了UIkit官方网站上关于form组件的基本示例代码，如下：

Legend

    

        
    

    

        
            Option 01
            Option 02
        
    

    

        
    

    

         A
         B
    

    

         A
         B
    

    

        
    

注意到，与上面模板部分代码的区别是，我添加了