今天具体说一说比较常用的; Mint UI 框架的按钮组件, Mint UI 是 饿了么团队开发基于 vue .JS 的移动端 UI 框架, 它包含丰富的 CSS 和 JS 组件, 能够满足日常的移动端开发需要.
官网: https://mint-ui.github.io/#!/zh-cn
GitHub: https://github.com/ElemeFE/mint-ui/
1: 安装 node
端开发框架和环境都是需要 Node.JS , 先安装 node.JS 开发环境, vue 的运行是要依赖于 node 的 NPM 的管理工具来实现, 下载 https://nodejs.org/en/ , 安装完成之后, 打开 cmd 开始输入命令.(我用的是 win10 系统, 所以需要管理员权限, 右键点击以管理员身份运行 cmd), 不然会出现很多报错.
image
2: 查看 node 的版本号
下载好 node 之后, 以管理员身份打开 cmd 管理工具,, 输入 node -v , 回车, 查看 node 版本号, 出现版本号则说明安装成功.
输入命令: node -v
image
3: 安装淘宝 NPM 镜像
由于 NPM 是国外的, 使用起来比较慢, 我们这里使用淘宝的 cnpm 镜像来安装 vue.
淘宝的 cnpm 命令管理工具可以代替默认的 NPM 管理工具.
输入命令: NPM install -g cnpm --registry=https://registry.npm.taobao.org
image
4: 安装全局 vue-cli 脚手架
淘宝镜像安装成功之后, 我们就可以全局 vue-cli 脚手架, 输入命令: cnpm install --global vue-cli 回车; 验证是否安装成功, 在命令输入 vue, 出来 vue 的信息, 及说明安装成功;
输入命令: cnpm install --global vue-cli
image
5: 开始进入主题, 初始化一个 vue 项目
我这里是在 d 盘里面新建一个项目, 先用 d: 的命令, 回车键进入 d 盘; 回车键默认创建项目信息.
vue init webpack mint
出现这样的提示, 初始化成功
打开 d 盘, 可以看到刚才初始化的项目
运行初始化 demo, 输入命令 NPM run dev; 运行一下初始后的 demo, 弹出访问地址, 如果没有问题则进行安装 Mint UI; 准备好好之后, 开始引入饿了么 Mint UI 组件.
- cd mint
- NPM run dev
6: 安装 Mint UI
NPM install mint-ui -S
快捷键 ctrl+c, 终止批处理操 作吗 (Y/N), 从上一步退出来, 再输入命令 NPM install mint-ui -S
成功安装组件显示如下
7: 然后在项目中的 main.JS 文件引入所有组件
- // 引入全部组件
- import Vue from 'vue';
- import Mint from 'mint-ui';
- Vue.use(Mint);
8: 在 App.vue 中写代码
- <template>
- <div id="app">
- <mt-button @click.native="handleClick"> 按钮 </mt-button>
- </div>
- </template>
- <script>
- export default{
- el: '#app',
- methods: {
- handleClick: function() {
- this.$toast('Hello world!');
- }
- }
- }
- </script>
- <style>
- </style>
9: 再次运行, 组件中的效果如下:
输入命令:
NPM run dev
来源: http://www.jianshu.com/p/874e5152b3c5