初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）

时间 2019-11-16

标签初探 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 }
});复制代码

原生js开发

克隆源代码到本地

git clone https://github.com/sunshineJi/amaze-vue.git复制代码

引入文件

打开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>复制代码

初探 amaze-vue（ 基于vue.js封装的Amaze UI 组件库）

项目地址

使用文档

开发

结合webpack + vue + amaze-vue进行快速开发

使用vue-cli快速构建

经过npm安装amaze-vue

使用amaze-vue进行开发

原生js开发

克隆源代码到本地

引入文件

初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）