UI 框架

项目初始化

一､ 项目文件夹 + README.md

cd ~/Desktop  
mkdir gulu-demo 
cd gulu-demo
touch README.md
vi README.md

二､ 仓库建立

git init 
git add .
git commit -m"init"
git remote git@github.com:xxx/gulu.git
git push -u origin master

三､ 许可证允许

1､仓库页面 点击 Create new file，输入名字LICENSE

2､点击右侧 Choose a license template，选 MIT License【Year,Full name可以更改】，点绿色按钮提交

3､继续一直点绿色按钮，到没有绿色为止，删除 Delete branch，这样就已提交到 master

4､点code选项，发现多了一个LICENSE文件

四､ 第三方工具(npm)

npm init      //下面这些括号里的都是默认值，要改的话，直接输入，不改的话，直接回车
package name: (gulu-demo) gulu 
version:(1.0.0) 0.0.1
description: 这是一个框架 
entry point:(index.js) //入口文件
test command: 
git reponsitory:(https://github.com:xxx/gulu.git)
keywords: vue ui
author: xxx
license:(ISC) MIT
这一些信息后，会显示一大串刚设置和确信的信息，让你确认
Is this ok? (yes) // 确认好，直接回车

此时到这里，就表示已选择好 npm 作为第三方工具的来源

继续提交

git add .
git commit -m "npm init"
git push

此时 package.json 也有啦

五､ 底层代码（Vue）+ WebStorm 控制 git 提交

npm i --save vue // --save 可有可无，因为npm 6 开始，就是默认的
git status -sb // 里面有 package.json、node_modules

我们需要改写

1､webStorm 打开仓库 (gulu-demo)

2､webStorm 需记的2个快捷键

a、shift + shift （按2次 shift），会弹出搜索框，可搜索其他任意的快捷键

image.png

操作git 的话，搜vcs，并选择 VCS Operations Popup.. ^V

image.png

点击 VCS Operations Popup.. ^V，能展示 当前可用的所有git操作

image.png

b、设置（没快捷键，鼠标直接点）

1､WebStorm下的 Preferences

image.png

2､选择 Keymap，进行设置，并删除不要的

image.png
image.png
image.png

提交仓库 gulu-demo时，发现太多不必要的文件，需要移除

新建文件 .gitignore

node_modules/   // 不要上传node_modules到git仓库

此时提交就只有三个文件了啦 （.gitignore、package.json、package-lock.json）

在Commit Message处输入提交信息 如（nom install vue），点右下侧 commit 提交即可

提示3个文件提交成功，WebStorm 完美地上传到 git 了啦

push 的话，可以按上面搜索来操作或是直接终端操作

开始项目

一、勾选这一项，以防出错

image.png

二、组件

1､ css 样式 用 变量 形式，自由使用

:root{ //定义
    --button-height: 32px;
    --font-size: 20px;
}

.g-button{//使用
    height: var(--button-height);
    font-size: var(--font-size);
}

:root—根组件（就是html，也有不表示html时），若发现兼容问题，改成html即可

2､ component

Vue.component('g-button',{
    template:`<button class="g-button">submit</button>`
})

样式在单独的style标签里 + Js 在单独的js 文件里+ Html 在 js 的 template 里(ES6模板)

Vue 可以用 一个单文件 表示这 3 种 语言，但需借助工具 Parcel (打包后，会编译为浏览器和 node 认识的语句)

npm i -D parcel-bundler // 局部安装

注：如果一个包是给用户使用的，就不需要 -D，比如之前安装的vue

​ 如果是给开发者使用，就要-D (D是Developer)，-g全局安装，也是给开发者用

2.1､ Vue单文件组件的三样东西 ：template + script + style

2.2､ Vue 有语法糖

Vue.component('g-button',{
    template:`<button class="g-button">submit</button>`
})

只需一个对象，即 export default后接一个对象，template 里面的html内容放到template标签，css 使用scss

<template><button class="g-button">submit</button></template>
export default{}
<style lang="scss"></style>

2.3､ 入口文件 (app.js)

a、通过import 添加依赖 【引入 vue + button】

import Vue from 'vue'
import Button from './button'

b、声明全局的g-button组件 【g-button 对应的是 Button】

Vue.component('g-button',Button)

2.4 运行 (安装需要的所有东西，不需配置)

./node_modules/.bin/parcel index.html //切记加上入口文件 index.html ，不然报错

再次运行，测试是否安装成功！出现下图表示成功

image.png

vue 配置 Parcel 时，需在package.json添加以下代码，不然报错

{
    ...
    "alias" :{
        "vue": "./node_modules/vue/dist/vue.common.js"
    }
}

加完此代码后，再次运行时，会有缓冲，有2种办法解决

a、加 --no-cache

./node_modules/.bin/parcel --no-cache index.html
git push 
git status -sb  
.cache/  //Parcel 在编译过程会产生的一些缓冲 .cache/
dist/
******************************
vi .gitignore // 编辑.gitignore
image.png

b、直接删除.cache 文件

rm -rf .cache
./node_modules/.bin/parcel index.html // 简写 npx parcel index.html

小知识：快速预览提交到github上的文件的工具 git-open

image.png

装好后，执行 git open 会直接打开github对应的页面

三、单元测试

1､chai 库测试 （BDD + TDD + Assert） www.chaijs.com

image.png
单元测试两步曲

a、作用域隔离（简单方式：大括号 | 高级方式： it ）
b、断言 (expect)

image.png

测试完后，得清除元素 + 清除元素对象，不然内存会占用

vm.$el.remove()
vm.$destroy()
image.png
2､ Chai Spies
npm i -D chai-spies

引入 + 使用

import chai from 'chai'
import spies from 'chai-spies'
chai.use(spy)

{//mock
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
            propsData: {
                icon: 'settings'
            }
        })

        vm.$mount()

        let spy = chai.spy(function () {
        })

        vm.$on('click', spy) //1、on click 触发 spy

        let button = vm.$el
        button.click()// 2、button点击后
        expect(spy).to.have.been.called() //3、期待 spy 已经被调用了
    }

四、自动化测试 （Karma）

三个文件
1、package.json (需要写一个 test命令)

image.png

2、karma.conf.js (需要载入你的js,css,并指定浏览器)

image.png

注：此处的test.css 一定要加，要不然和样式有关的测试事例都会出问题

image.png

3、button.test.js (你的测试用例，需要用 it 隔开，每个测试用例写一个断言)

image.png
expect (xxx).to.equal(yyy) // 期待xxx 等于 yyy，简写为 expect (xxx).to.eq(yyy) 

如：
expect([1,2]).to.eq([1,2]) // 不同的数组，只是元素相同而已 ，比较两个地址 ，即浅拷贝
expect([1,2]).to.deep.eq([1,2]) //deep 就是深入进去看 比较，即深拷贝

语句是 chai.js提供 (https://www.chaijs.com/)

image.png

五、npm run test 出现 Bug

image.png

把上一次打包的东西删掉，重新打包就好

rm -rf .cache dist  // 上一次打包的东西删掉
npm run test // 重新打包

如果又出现同一错误，重新操作这两步，或package.json 加上这一句--no cache就好啦

image.png

六、TravisCI 持续集成

1､新建 .travis.yml

language: node_js
node_js: //支持三个版本（8,9,10）
 - "8"
 - "9"
 - "10"
addons:
  chrome: stable
sudo: required
before_script:
- "sudo chown root /opt/google/chrome/chrome-sandbox"
- "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

2､travis-ci.org 注册帐户

​ a、点My Repositories旁边 + 号，搜索选择项目(即仓库名)

​ b、勾选右侧settings，变亮啦

​ c、travis接入完成

3､提交

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

4､回到travis-ci.org点首页，发现多了一个刚接入的项目，并且正在跑我们的测试用例

image.png

小知识： 无头浏览器指没有界面的浏览器

七、npm 发布自已的包

1､更新 package.json

a、在 package.json 里将版本号改为 0.0.1，等做完了再改成 1.0.0

b、创建 index.js（程度默认的入口），在 index.js 里将想要导出的内容全部导出

//引入
import Button from './src/button'
import ButtonGroup from '.src/button-group'
import Icon from './src/icon'

//导出
export {Button,ButtonGroup,Icon}

c、package.json 里的入口文件是index.js，即main 对应的是 index.js（如果默认加了，就不用改）

​ 注：main 对应的必须是index.js ，因为你上面建的就是index.js ，它们必须 是一致的

2､https://www.npmjs.com/ 注册一个账户 (切记username 才是登录名，Full Name不是)

3､确认一下邮箱（必须）

4､在 gulu 项目根目录运行 npm adduser
输入相关信息，出现 Logged in as……....https://registry.npmjs.org/ 时，表示成功登录

5､运行 npm publish （从本地上传代码，不需push）

注：最好是看下package.json的name，后要push（一定要），然后再npm publish


image.png

成功上传了啦，此时可以通过 npm i xwu_gulu 下载啦

可以随意选一个目录，比如桌面

image.png

这样子下载成功，它们在 node_modules下面

image.png

仔细看，会发现这些就是之前上传的文件

image.png

八、使用自已的包

使用过程中，报错说import 语法有问题（因为 node 目前不支持 import，需用 babel 转译 import）

注：parcel 可以编译指定的文件

1､ npx parcel build index.js --no-minify (切记加上 --no-minify，不然报错，HTML 压缩把 slot标签全删了)

2､ package.json 的 main 改为 dist/index.js

image.png

打开dist/index.js 看，果真不一样了

image.png

接下来，再来发布（push）

image.png

注意 ：再次发布代码时，要做一个变动，版本号必须和上一次不一样，如果一样，会阻止你发布

image.png

所以呢，改下版本号


image.png

继续提交发布

git add .
git commit -m"bump version"
git push
npm publish

版本0.07 成功

image.png

到hello-world目录下，执行yarn add xwu_gulu，会自动操作，下载最新版，即用户视野下,更新到了版本0.07

image.png

小总结：
我：上传代码，
别人：用代码

步骤：
1､ 自定义颜色
2､ 引入需要的组件 + css 文件

九、npm link | yarn link （加速调试）

别人得到最新代码，之前：
1､ 更新 package.json 里的 version
2､ npm publish。
3､用户使用方： npm add xxx 来更新

之后：
1､ 在项目目录使用 npm link
2､ 用户使用方：运行 npm link xxx，就是最新了

注： npm link / yarn link 之后项目报错 ，此时 你就不要再用 npm link 了

你只需要每次改完代码后 npm publish ，然后在另一个地方 npm install xxx@0.0.x 即可

1､ 上传 : npm publish 或. yarn publish
2､ 下载 npm install 你的包 如： npm install xwu_gulu 或 yarn install xwu_gulu

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342