初探 amaze-vue（ 基於vue.js封裝的Amaze UI 元件庫）

抽菸的兔子不會跳發表於2017-12-06
Vue.js封裝UI元件

Amaze UI 是以移動優先（Mobile first）為理念，面向 HTML5 開發的國產優秀元件庫。因官方未提供vue.js版本，而且民間一直對vue.js版本的 Amaze UI 元件庫呼聲很高，今天 特來分享一個完整版的基於Amaze UI 封裝的vue.js元件庫。

專案地址

amaze-vue

使用文件

document

開發

結合webpack + vue + amaze-vue進行快速開發

使用vue-cli快速構建

傳送門

通過npm安裝amaze-vue

npm install amaze-vue --save1複製程式碼

使用amaze-vue進行開發

修改src/main.js 檔案

import Vue from 'vue';
import App from './App';
import AmazeVue from 'amaze-vue';
import 'amaze-vue/dist/amaze-vue.css';
Vue.use(AmazeVue);
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
});複製程式碼

原生js開發

克隆原始碼到本地

git clone https://github.com/sunshineJi/amaze-vue.git複製程式碼

引入檔案

開啟clone下來的資料夾
檔案目錄

將dist目錄下的檔案拷貝到工程目錄下進行後引入
AMAZEVUE_PATH 是將dist 目錄拷貝到專案後的位置

<!DOCTYPE html>
<html>
<head>
    <title>amaze-vue</title>
    <link rel="stylesheet" type="text/css" href="AMAZEVUE_PATH/amaze-vue.css"/>
</head>
<body>
    <div id="app">
        <am-warning color="success" :closeBtn="true"><h1>這是一個warning提示</h1></am-warning>
    </div>
    <script src="http://unpkg.com/vue" type="text/javascript"></script>
    <script type="text/javascript" src="AMAZEVUE_PATH/amaze-vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app'
        })
    </script>
</body>
</html>複製程式碼


相關文章