IT修真院

今天完成的事，今天学习了vue的ui框架

使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

引入 Mint UI

你可以引入整个 Mint UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({  el: '#app',  components: { App }
})

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{  "presets": [
    ["es2015", { "modules": false }]
  ],  "plugins": [["component", [
    {      "libraryName": "mint-ui",      "style": true
    }
  ]]]
}

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */new Vue({  el: '#app',  components: { App }
})

开始使用

至此，一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

npm run dev

编译：

npm run build

学习了es6的箭头函数

箭头函数

语法：                                              

只传1个参数括号可以省略，箭头函数不支持arguments，es6使用…剩余运算符

优势使用剩余运算符接收到的本身就是一个数组

Es6给对象的属性设置函数也可以简写

箭头函数的this指向问题，不管什么情况this都指向window

箭头函数没有自己的this指向，用到的this都是宿主环境（他的上级作用域中）的this，项目中不是要把所有的函数都改为箭头函数，根据自身需要修改即可，例如我们需要this是宿主函数的this，或者函数不用this。宿主环境不是执行的环境，而是定义的环境。

Es6中的继承

Es6新增的语法，如果是通过New执行的返回结果是当前创建的类，如果是当普通的函数执行，返回的是undefined。

Es5中创建类和实例，以及如何禁止用户把类当做普通函数执行

Es6创建类

Es6中使用class创建类，天生自带NEW.target的验证，不允许把创建的类当做普通函数来执行.es6默认把constructor的问题解决了，此时原型上的constructor指向的就是构造函数本身，class创建的类不存在变量提升

遇到的困难

对UI框架应用的还不熟练

收获

初步了解了ui框架