项目初始化

一､ 项目文件夹 + 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