Vue.js入门知识day7

scope属性的实现

• 样式的scope属性是通过css的属性选择器来实现的。

MINT-UI组件使用

安装

npm i mint-ui -s

完整引入组件

在main.js中写入以下内容

import Vue from 'vue'

//导入所有的 MintUI组件
//导入 Mint-UI
import MintUI from 'mint-ui'
//这里可以省略node_modules这一层目录
import 'mint-ui/lib/style.css'
//将 MintUI 安装到 Vue中
Vue.use(MintUI)//把所有的组件注册为全局的组件

//导入app组件
import app from  './app.vue'

注意
1.样式文件需要单独引入
2.当全局安装完mint-ui之后，css components不需要再按需导入了，直接拿标签用即可

<!--为什么这里叫做 mt-button 的 button 直接就能用?因为组件已经被注册为全局组件了-->
        <mt-button type="danger" size="large">default</mt-button>

Toast组件的使用

引入

 //按需导入 Toast 组件
    import {Toast} from  "mint-ui"

传值

Toast({
                    message:"提示信息",//弹框文本内容
                    position:'bottom',//弹框位置，默认middle
                    duration:-1,//持续时间，若为-1不会自动关闭
                    className:'mytoast',//自定义Toast的样式，需要自己提供一个类名
                    iconClass:'glyphicon glyphicon-heart'//设置icon图标的类名，图标需自行准备
                })

设置关闭

执行Toast方法都会返回一个Toast实例，每个实例都有一个close方法，用来手动关闭Toast

 data(){
            return {
                toastInstanse:null
            };
        }

//用toastInstance接受Toast实例
  this.toastInstanse = Toast({
                    message:"提示信息",//弹框文本内容
                    position:'bottom',//弹框位置，默认middle
                    duration:-1,//持续时间，若为-1不会自动关闭
                    className:'mytoast',//自定义Toast的样式，需要自己提供一个类名
                    iconClass:'glyphicon glyphicon-heart'//设置icon图标的类名，图标需自行准备
                })

 getList(){
                //模拟获取列表的一个 Ajax方法
                //在获取数据之前，立即弹出 Toast提示用户，正在加载数据
                this.show();
                console.log(this.toastInstanse)
                setTimeout(()=>{
                    //当三秒过后，数据获取回来了，要把Toast移除
                    this.toastInstanse.close()
                },3000)
            }

Mint-UI按需导入的配置方式

按需导入组件

//按需导入 Mint-UI中的组件
import {Header} from  'mint-ui'
Vue.component(Header.name,Header)

使用MUI代码片段

注意：MUI不同于Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码，类似于Bootstrap；而Mint-UI是真正的组件库，是使用Vue技术封装出来的成套的组件，可以无缝的和VUE项目进行集成开发
因此，从体验上来说·，Min-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；从体验上来说，MUI和bootstrap类似
理论上，任何项目都可以使用MUI或bootstrap，但是Mint-UI只适用于Vue项目；

注意：MUI并不能使用npm去下载，需要自己手动从github上下载现成的包，自己解压出来，然后手动拷贝到项目中使用

//导入MUI的样式表，和Bootstrap用法没有差别
import './lib/mui/css/mui.min.css'

把本地项目托管到github上【转载菜鸟教程http://www.runoob.com/w3cnote/git-guide.html】

配置Git

首先在本地创建ssh key；

$ ssh-keygen -t rsa -C "your_email@youremail.com"

后面的your_email@youremail.com改为你在github上注册的邮箱，之后会要求确认路径和输入密码，我们这使用默认的一路回车就行。成功的话会在~/下生成.ssh文件夹，进去，打开id_rsa.pub，复制里面的key。

回到github上，进入 Account Settings（账户配置），左边选择SSH Keys，Add SSH Key,title随便填，粘贴在你电脑上生成的key。

为了验证是否成功，在git bash下输入：

$ ssh -T git@github.com

如果是第一次的会提示是否continue，输入yes就会看到：You’ve successfully authenticated, but GitHub does not provide shell access 。这就表示已成功连上github。

接下来我们要做的就是把本地仓库传到github上去，在此之前还需要设置username和email，因为github每次commit都会记录他们。

$ git config --global user.name "your name"
$ git config --global user.email "your_email@youremail.com"

进入要上传的仓库，右键git bash，添加远程地址：

$ git remote add origin git@github.com:yourName/yourRepo.git

后面的yourName和yourRepo表示你在github的用户名和刚才新建的仓库，加完之后进入.git，打开config，这里会多出一个remote "origin"内容，这就是刚才添加的远程地址，也可以直接修改config来配置远程地址。

创建新文件夹，打开，然后执行 git init 以创建新的 git 仓库。