Vue-造轮子-1（框架搭建 & 持续集成（上））

1. 根目录创建button.js 和 index.html

在button.js中声明了g-button,在index.html中引入的时候可以直接当做标签用

image.png image.png

2.:root变量的用法

image.png

3.使用parcel为构建工具
给开发者使用就要 -D，给用户使用就什么也不用加
npm i -D parcel-bundler

4.按照parcel文档来写，首先根目录下新建src目录和文件，编辑内容

image.png

把button.js，变为button.vue存在src中 ，这里做了一个语法糖Vue.template('g-button'{})如下，html直接在template中，js中导出这个组件

image.png

把app.js编辑成这样

image.png

5.这里的css用scss预处理语言，把index.html中的样式拷过来，然后&是表示当前的选择器

image.png

把html编辑成

image.png

6.开始打包，运行
./node_modules/.bin/parcel index.html
然后发现报错了

image.png

这个时候不要慌他报错说你在使用runtime版本，vue文档中有告诉你如何配置parcel

image.png

根据文档说的在package.json中添加这个，添加好了以后重新打包运行
./node_modules/.bin/parcel index.html --no-cache

然后发现运行了。(＾－＾)V

编辑.gitignore 添加 .cache/ 和dist/ 目录，这两个不需要上传
然后提交一下

7. ./node_modules/.bin/parcel index.html太长了 可以简写为
   npx parcel index.html

8.安装 npm i -g git-open
然后运行 git open 就会直接打开这个页面的提交记录

9.这里不一定非是：root 其实他相当于一个作用域，写成html也可以

image.png

10.git status -sb 是看要传什么文件