咕噜UI日程规划今天用了一天的时间梳理了一下造轮子的整个流程。之所以做这个项目主要还是为了让自己更好的熟悉VUE,但是在

今天用了一天的时间梳理了一下造轮子的整个流程。之所以做这个项目主要还是为了让自己更好的熟悉VUE,但是在学习的过程中学会了许多知识，比如：如何构建一个前端Vue项目。如何进行单元测试，如何进行自动化测试，如何进行npm包的发布，如何使用VuePress构建自己的轮子官网。

在学习的过程中，首先我用了将近一周的时间去学习如何造轮子，但是每次总是到最关键的地方运行不成功，比如npm包无法发布，还有就是迄今为止我的Travis CI也没有成功。

第一版的项目写的乱七八糟的一点头绪都没有，就舍弃了那个版本

那个时候已经有些放弃了，后来我就制作一个button轮子，然后直接进行代码发布，官网build，真的就成功了。

所以我决定采用这一版然后将整个流程记录下来。

第一步：

构建前端框架：首先就是在github上建一个仓库，然后对项目进行初始化：

npm init ;
npm install ;

需求分析之后就开始写代码；完成button组件之后需要进行单元测试。单元测试文档指路：juejin.cn/post/684490… 自动化测试文档指路：juejin.cn/post/684490… 自动化测试之后需要在Travis CI进行持续集成首先需要在项目的根目录创建.travis.yml文件，文件内容如下：

language: node_js
node_js:
  - "8"
addons:
  chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

先不要push 第一步：点击这个加号

第二步：给它变绿

变绿之后

git add .
git commit -m "接入"
git push

push之后travis就开始进行测试了但是我一直不明白为什么的结果一直失败，似乎是yarn和npm冲突。这令我很是苦恼

接入travis之后进行npm包的发布文档指路：juejin.cn/post/684490…

第二步：

button组件完成之后使用parcel index.html --no-cahce成功运行，那么接下来开始创建官网。使用VuePress。文档指路：www.vuepress.cn/guide/getti…

Vue第一课

第一题：

window.n = 'window name'
let obj = {
    n: 'obj name',
    sayN(){
        console.log(this.n)
    }
}

let fn = obj.sayN
fn()

第二题：

window.n = 'window name'
let obj = {
    n: 'obj name',
    sayN: () => {
        console.log(this.n)
    }
}

obj.sayN()

第三题：

class A{
    constructor(){
        this.name = 'A'
    }
    sayName(){
        console.log(this.name)
    }
}
class B extends A{
    constructor(){
        super()
        this.name = 'B'
    }
}

let obj = new B()
console.log(obj.sayName())

第四题：

Promise.reject('error')
    .then( ()=>{console.log('success1')}, ()=>{console.log('error1')} )
    .then( ()=>{console.log('success2')}, ()=>{console.log('error2')} )

第五题：

<div id=app></div>
window.name = 'window name'
let app = new Vue({
    name: 'name 1',
    el: '#app',
    data(){
      return {name:'name 2'}
    },
    created(){
        console.log(this.name)
    }
})

第六题：

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

var Component = Vue.extend({
  mixins: [myMixin],
  methods: {
    hello(){
      console.log('hello from options')
    }
  }
})

var component = new Component()

第七题：

function getSomething(){
    setTimeout(function(){
        return 'hello'
    })
}

let something = getSomething()
console.log(something)

第八题：

let _name = 'MyName'
let obj = {}
Object.defineProperty(obj, 'name', {
    get(){
        return _name
    },
    set(value){
        _name = value
    }
})

obj.name = 'NewName'
console.log(_name)

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
理想的 key 值是每项都有的且唯一的 id。 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 是必须的。

Vue造轮子第一阶段-框架搭建

import,export,class,Promise,解构赋值,await,try..catch,throw等语法

DOM是什么？
AJAX是什么？

学习历程：需求分析- UI设计- 写代码- 单元测试- 文档撰写- 持续集成

注意：如果一个包是给用户使用的，安装的时候不需要-D；但是如果是给开发者使用的就需要-D；例如：npm install -D parcel-bundler

将代码从原始的JS版本变成Parcel版本

了解单文件组件：将HTML,CSS，JavaScript放在一个组件里

知识点： 1：parcel 2：scss 3：Vue单文件组件 4：WebStorm快捷键使用 5：CSS变量和:root选择器 6：Vue.component 7：插槽(slot) 8：$emit 9：props 10：Headless Chrome 11：Karma 12；Mocha 13：Mock 14：npm script

Vue接受外部传参通过props

如何实现icon一个在左边，一个在右边可以选择循环，引入一个属性iconPosition,如果iconPosition为right,就是在右边，使用CSS间接的控制他的顺序

小技巧：遇到不对齐，vertical-align: middle; 就完事

属性的检查器：

添加loading加载：
先声明一个动画
然后spin这个动画

什么是CSS雪碧图啊

单元测试： chai.js是一个BDD(Behavior Driven Development,行为驱动开发)/TDD （测试行为开发）的assert(断言)库单元测试就是传一个输入，然后看输出的东西是否和输入的是匹配的。放一个输入，得到一个输出

mock是什么还是不太理解

总结：单文件组件(vue);
Parcel(打包)
单元测试(juejin.cn/post/684490…)
自动化测试(juejin.cn/post/684490…)
持续集成(Travis CI/Circle CI)
package.json发布(dist/index.js dist/index.js)
yarn link/npm link

Vue造轮子第二阶段-组件开发

input组件

需求分析

数据的双向绑定获取Value值，触发input属性如何让你的组件支持V-model

网格布局

什么是Grid UI 代码测试

created和mounted的区别 created：内存中生成一个对象 mounted：将对象挂载到页面上去父子之间的钩子顺序，由此而得，如果当前组件已经mounted

Vue的渲染过程

如果有钩子就会有异步操作，如果没有钩子就没有异步操作

如果测试中存在任何的异步都需要在参数中添加一个done参数，否则会按照同步的模式进行

添加totast组件

需求分析

create一个组件好还是create一个div好

咕噜UI日程规划