MintUI

MintUI

MintUI是饿了么团队开发的基于移动端的vue组件库。

http://mint-ui.github.io/docs/#/zh-cn2/quickstart

基于脚手架安装MintUI

1. 创建新的脚手架项目 scaffolding。

   # 找一个目录 ： demo，执行命令，创建项目 
   vue create scaffolding
   # 依次选择
   Manually select features    # 手动选择配置
   Choose Vue Version-Babel-Router-Vuex     不要选linter
   2.x
   是否使用history模式的路由？  yes
   in package.json
   是否把当前配置作为以后创建项目的预设项配置？  no
   

2. 在新项目中通过npm install安装MintUI。

   # 先进入项目目录，在项目目录下执行npm命令安装mintui
   cd scaffolding
   npm i mint-ui -S
   

   一旦通过npm install安装完毕后，将会在package.json中自动添加dependencies依赖，只需要查看package.json里是否添加了mintui即可验证是否安装成功。

3. 在main.js中配置MintUI。

   import MintUI from 'mint-ui'
   import 'mint-ui/lib/style.css'
   Vue.use(MintUI)
   

4. 开始使用。

   1. 新建页面：src/testing/Button.vue。编写按钮组件。
   2. 配置路由： /button <---> Button.vue

MintUI常用组件

Header组件

Header组件用于定义移动端界面的头部标题栏。基本结构如下：

<template>
	<div>
        <mt-header title="标题内容文本"></mt-header>
    </div>
</template>

引入外部样式表：reset.css

1. 在public目录下新建styles目录，将reset.css放进去。
2. 在index.html中引入该css即可。

脚手架项目public目录下的资源访问方法（使用绝对路径直接访问）

webpack打包过程中将会把public下的资源原封不动直接放到输出项目的根目录下。所以我们可以直接用绝对路径访问public下的所有资源。例如：

若有文件：/public/favicon.ico
如下访问：http://localhost:8080/favicon.ico

若有文件：/public/styles/reset.css
如下访问：http://localhost:8080/styles/reset.css

若有文件：/public/js/jquery.js
如下访问：http://localhost:8080/js/jquery.js

Field组件

field组件用于实现表单编辑器。其语法：

<mt-field type="输入框的类型"
          label="输入框左侧标签的文本"
          placeholder="占位内容"
          readonly  只读
          disabled  禁用
          disableClear
          state="输入框的状态  success|error|warning">
</mt-field>

案例：访问：/field看到表单页面。

完成注册页面

1. 新建src/views/Register.vue。编写注册页面。
2. 配置路由：/register <---> Register.vue。