一、UIkit組件庫與vuikit簡介

在選擇好意中的前端開發(fā)基本框架后，接下來一個重要任務就是選擇一款好的UI組件庫。其中，UIkit組件庫是一款基于Less+JS的一款輕量級、模塊化、響應式的前端UI組件庫。特別是，從版本3.0.0 beta 31開始完全脫離了jQuery框架。
UIkit組件庫的一個重要特點是，其提供的組件大部分是非?；A(chǔ)性的，但是也有一部分組件相當實用，例如Slideshow組件、Upload組件、Video組件等，在github網(wǎng)站上的評價星數(shù)是13K，相當不錯。
另一個vuikit庫尚非常年輕，其目標是基于流行的UIkit打造針對Vue.js的組件庫。建議目前先不要選擇這個。

站在用戶的角度思考問題，與客戶深入溝通，找到沁源網(wǎng)站設(shè)計與沁源網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋沁源地區(qū)。

有關(guān)最新的Vue框架中使用UIkit庫的資料在網(wǎng)絡(luò)上極其少見。本人經(jīng)過幾天的分析實驗總結(jié)了在目前最新的Vue CLI 3開發(fā)中使用UIkit 3組件庫的基本思路。有了這個基本示例，結(jié)合你所熟悉的Vue開發(fā)技巧，就能快速實現(xiàn)常見的基于Vue前端框架的項目。

二、Vue CLI 3開發(fā)中試用UIkit組件庫

1. 安裝Vue CLI 3

這個Vue官方網(wǎng)站上和其他許多地方都有介紹，非常簡單，此處不再贅述。
你可以使用：

npm install -g @vue/cli

或者：

yarn global add @vue/cli

但是，安裝之前，官方資料強調(diào)必須先卸載以前的版本，命令如下：

yarn global remove vue-cli

Vue CLI 3與Vue CLI 2大不一樣了。因此，很多網(wǎng)站提供的教程都已經(jīng)過時，僅供參考。

2. 添加UIkit組件庫

在使用命令vue create <項目名稱>創(chuàng)建一個Vue前端工程框架后，你就可以使用下面命令把UIkit組件庫添加到當前Vue工程中：
yarn add uikit

為了簡單起見，我們直接使用UIkit官方網(wǎng)站上提供的例子作為說明（主要介紹步驟）。

3. 修改App.vue根組件

代碼如下：

>

請?zhí)貏e關(guān)注上述代碼中的加粗部分！

4. 修改HelloWorld.vue組件

修改后完整的代碼如下：

****

再強調(diào)一下，我直接使用了UIkit官方網(wǎng)站上關(guān)于form組件的基本示例代碼，如下：

    
Legend

    

        
    

    

        
            Option 01
            Option 02
        
    

    

        
    

    

         A
         B
    

    

         A
         B
    

    

        
    

注意到，與上面模板部分代碼的區(qū)別是，我添加了