Vue-第七天 学习与相关问题总结

Vue 学习 第七天

 

1.。Mint UI 学习,提供了各种各样的组件。http://mint-ui.github.io/docs/#/

第一步，安装包， npm i mint-ui -S

第二步，引入，

第三步，使用

第四步，学习看官网使用步骤。

下面是关于Toast 的使用，

其中主要学习了模拟定时器的作用，初始化调用动画，应对时间以后动画消失，setTimeout()的使用，其中还有第二种形式

setTimeOut(()=>{

//作用域问题，得这样写，

},3000)

【

created(){

this.getList(); //组件一创建，立即获取数据，调用getList ,跳出那个弹窗，提示正在加载数据，

//三秒过后，数据获取回来了，就把那个移除，

},

 

 

getList (){ //模拟获取列表的ajax 方法

//上来就设置一个延时三秒的延时器，当列表数据获取回来以后再消失，

this.show(); //数据获取之前，弹出，三秒以后消失

// setTimeout(function(){

// //内部,每当获取list 就弹出那个框，获取到以后就消失

// this.toastInstace.close();

// },3000); //三秒之后，数据回来了，

// this.show();

setTimeout (() => {

this.toastInstace.close();

},3000);

},

show() {

this.toastInstace = Toast({ //要想访问，就得定义

message : '正在获取数据', //当请求的数据获取完毕以后才消失该动画

duration :-1, //如果是-1 则弹出之后不消失，

position :'top',

iconClass: 'glyphicon glyphicon-star',

className : 'mytoast' //自定义Toas 样式

 

});

}

 

】

 

2. 按需导入 Mint-UI 的组件内容、减少项目体积，

第一步，装包 npm i --save babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

npm i babel-loader -D

npm i babel-plugin-component -D

第二步，配置组件，。babelrc 中配置规则

["component", [

{

"libraryName": "mint-ui",

"style": true

}

]]

 

 

//按需导入Mint-UI 的组件

import { Button} from 'mint-ui'

//使用vue.component 注册组件

Vue.component(Button.name,Button);

 

 

3.MUI 片段学习

MUI并不能使用npm 下载，需要手动从github上下载，解压，手动放到项目中，

第一步，下载包

第二步，import

第三步，复制使用。

 

4.项目开发。。先整理出一个模板项目目录。

1.分析项目的划分，相关组件的工作原理

2.划分区域，并且初步布局，三个div，底部tabbar实现

3.错误总结一下，导包的时候报错。

使用MUI 进行项目开发的时候，无法解析字体，报错，是因为前期视频学习漏掉一个知识点url-loader 的学习和使用

 

解决方法：

cnpm i --save-dev url-loader

在webpack.config.js里module.rules:  【配置】--跟其他css-loader 一样进行配置

      {

        test: /\.(eot|svg|ttf|woff|woff2)$/,

        loader:"url-loader",

        options: {

          name: '[name].[ext]?[hash