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

時間 2019-11-13

標籤初探 amaze vue 基於 vue.js 封裝組件欄目 JavaScript 简体版

原文原文鏈接

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

項目地址

amaze-vuecss

使用文檔

documenthtml

開發

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

使用vue-cli快速構建

傳送門vue

經過npm安裝amaze-vue

npm install amaze-vue --save1

使用amaze-vue進行開發

修改src/main.js 文件java

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 }
});1234567891011

原生js開發

克隆源代碼到本地

git clone https://github.com/sunshineJi/amaze-vue.git1

引入文件

打開clone下來的文件夾
webpack

將dist目錄下的文件拷貝到工程目錄下進行後引入
AMAZEVUE_PATH 是將dist 目錄拷貝到項目後的位置git

<!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>