Vue轮子笔记

---

1.创建仓库
2.组件
3.打包工具
4.报错总结
5.git 新建分支

---

创建仓库

• 本地

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

轱辘 - 一个 Vue UI 组件
作者： 我

git init
git add .
git commit -m "init"
git remote add origin [email protected]:xingkongs/xingkongs-test-1.git

• github

仓库点击 Create new file
新建的文件名称处填写 LICENSE
右侧选择 license 模板
选择 最宽松的 MIT
点绿色按钮 创建 license
连续点绿色按钮 merge license 到仓库

• 回到本地

npm init

//本地与远程代码同步
git pull
ctrl + z //退出
git add commit push...

//添加 .gitignore
node-modules/
.idea/

//push的时候发现还有 .idea
git rm -r --cached .
git add .
git commit -m 'update .gitignore'

push 成功 

yarn add vue
yarn add parcel-bundler -D

• CSS

:root 表示根组件 其实就是html 如果发现兼容性问题 你改成 html就行了 ie8部分支持

组件

• 子组件安装
  如果一个包是给用户使用的 就不需要 -D
  如果是给开发者使用的 就使用 -D
  -D developer 开发者的意思
• 子组件
  单文件组件 就需要三个东西
  template 、script 、style
  子组件不能使用 data-开头的属性
  vue 有语法糖

vue.component("",{xxx})

只需要 一个对象{xxx}
你把对象 export一下

export default{xxx}

style 想用scss 就

scss 不需要重复 一个选择器
放到第一个{}里
{} 中用& 表示当前的选择器

.wrapper{
  ...
  &>first-of-type{
      ...
  }
}

• 入口文件
  需要 import 引入进来 Vue 和Button
  申明下 Vue.component('g-button',Button)

打包工具

• parcel

./node_modules/.bin/parcel --no-cache
./node_modules/.bin/parcel
想短点? 
npx parcel --no-cache

//为了不加参数 删掉cache 
rm -rf .cache

• 使用git-open 打开远程仓库

npm i git-open
git open

---

报错总结

• git push 报错

git push -u origin master
///
sign_and_send_pubkey: signing failed: agent refused operation
Permission denied (publickey).

github 添加第二个 秘钥

ssh-keygen -t rsa -b 4096 -C "新的邮箱"
三个回车
把 xxx.pub 更新到 github
还是报错

执行

eval "$(ssh-agent -s)"
ssh-add

成功上传

• 运行 npx parcel报错
  npx parcel -p 35385

  gulu-demo git:(master) ✗ npx parcel -p 35385
Server running at http://localhost:35385 
✨  Built in 746ms.
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: watch xx/node_modules/
caniuse-lite/data/regions/RU.js ENOSPC
    at _errnoException (util.js:992:11)
    at FSWatcher.start (fs.js:1382:19)
    at Object.fs.watch (fs.js:1408:11)
    at createFsWatchInstance (xx/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (xx/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (xx/node_modules/chokidar/lib/
nodefs-handler.js:232:14)
    at FSWatcher.NodeFsHandler._handleFile (xx/node_modules/chokidar/lib/
nodefs-handler.js:259:21)
    at FSWatcher. (xx/node_modules/chokidar
/lib/nodefs-handler.js:480:21)
    at FSReqWrap.oncomplete (fs.js:153:5)

或者

Error: ENOSPC: no space left on device, watch 
'xx/node_modules/type-check/package.json'
    at FSWatcher.start (fs.js:1409:26)
    at Object.fs.watch (fs.js:1446:11)
    at createFsWatchInstance (xx/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (xx/node_modules/chokidar/lib/
nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs 
(xx/node_modules/chokidar/lib/nodefs-handler.js:232:14)
    at FSWatcher.NodeFsHandler._handleFile (xx/node_modules/chokidar/lib/
nodefs-handler.js:259:21)
    at FSWatcher. (xx/node_modules/chokidar/lib/
nodefs-handler.js:480:21)
    at FSReqWrap.oncomplete (fs.js:185:5)
Emitted 'error' event at:
    at FSWatcher._handleError (xx/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (xx/node_modules/
chokidar/lib/nodefs-handler.js:39:5)
    at setFsWatchListener (xx/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    [... lines matching original stack trace ...]
    at FSReqWrap.oncomplete (fs.js:185:5)

执行

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

这时再运行 npx parcel

• 控制台报错

vue.runtime.esm.js:41 [Vue warn]: 
You are using the runtime-only build of Vue where the template compiler
 is not available.
 Either pre-compile the templates into render functions, 
or use the compiler-included build.

Vue 文档有相关介绍 需要修改 package.json

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

重新运行parcel

还报错 ？
npx parcel --no-cache

成功！！！～～～

• 控制台报错

Do not use built-in or reserved HTML elements as component id: input

这个报错 可能是你的组件 命名与 html 的命名有冲突
查看下你的组件name

• parcel build svg 报错

$ npm run build

> [email protected] build E:\work\specialTemplate
> npx parcel build index.html  --no-cache --public-url ./

×  Error in parsing SVG: Unbound namespace prefix: "xlink"
Line: 0
Column: 52
Char: >
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: 
`npx parcel build index.html  --no-cache --public-url ./`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm.
There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xingkongs\AppData\Roaming\npm-cache\_logs\
2018-09-12T08_14_33_889Z-debug.log

可以在 svg 加属性 xmlns:xlink

• yarn 安装报错

yarn install
There are no scenarios; must have at least one.

这个因为 yarn的版本不够高 需要重新安装yarn
以 linux 为例

//添加 yarn源
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
//重新安装 yarn
sudo apt-get install yarn

• 使用 vuepress 引入组件报错

Can't resolve 'sass-loader'

需要安装 相关 预处理器文档

//例如sass需要安装
yarn add -D sass-loader node-sass

• 使用 vue-cli 代替 parcel 后 yarn test 报错

 yarn test
yarn run v1.13.0
cross-env BABEL_ENV=test karma start --single-run
15 03 2019 15:59:39.084:ERROR [karma-server]: 
Server start failed on port 9876: 
Error: No provider for "framework:sinon-chai"! 
(Resolving: framework:sinon-chai)

需要 安装 karma-sinon-chai

yarn add --dev karma-sinon-chai

---

git 新建分支

git branch new-branch
git push origin new-branch:new-branch
git checkout new-branch

引号问题

// span 传入的是字符串 "1"
//如何传 数字 1 呢


//span= 后面的引号 是 html的 引号 里面的1 是数字1

//那怎么传字符串呢 下面的三种方法都可以



//外面的引号是html的 引号  里面的引号是 js的引号