VUE_UI.UI组件和CLI脚手架

1 vue ui 组件

pc端与移动端区别：屏幕宽度992px、操作方式
基于VUE框架开发移动端组件库Mint-UI、MUI(dev.dcloud.cn/mui/)

1.1 mint-ui安装与使用

1）学习环境下载mint-ui js/css/font
2）生产环境下载安装(脚手架)npm i mint-ui

1.2 mint-ui组件分类

1）-css Components；
2）-js Components；
3）-Form Components；

1.3 mint-ui组件

1.3.1 Toast提示框

下载mint-ui js，mint css，vue.js
html先加载vue.js文件再加载mint.js
this.$toast(""); 或者 this.$toast({})

变量	值
message	提示性文字
position	top;middle;bottom
duration	持续时间ms，-1不消失
className	样式
close()	删除提示消息对象

1.3.2 lazyLoad懒加载

<img v-lazy=“x.png”>
显示样式img[lazy=loading]{}

1.3.3 mt-swipe轮播图

 <mt-swipe :auto="4000" :show-indicators="true">
  <mt-swipe-item>
     <img src="x.jpg" />
  </mt-swipe-item>
 </mt-swipe>

mint-ui组件轮播图默认高度为0，设置父元素高度

2 vue cli 脚手架

使用脚手架来完成复杂的前端项目、管理维护项目第三方库、热部署(保存的文件自动部署到服务器)

2.1 文件目录功能

src目录中：
main.js是入口文件，负责加载并配置项目使用的模块，同时创建Vue实例对象；
router.js是路由模块，引入不同组件并配置其访问路径；
App.vue根组件；
components是项目中开发的组件；
lib/mui/css(fonts/js)分别代表mui库使用样式、字体图标、mui库js

node_modules第三方模块目录中：
axios是vue发送ajax请求的第三方模块；
mint-ui是mint-ui 组件库
安装第三方模块的方法：npm i 库名称

package.json项目描述和配置文件：
根据scripts配置启动命令和端口号
npm run serve

2.2 开发流程

常规开发组件工作流程
(1)明确需要在 main.js 加载配置的第三方组件
(2)在components目录下创建组件

   <template><