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 git@github.com: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

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

组件

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

vue.component("",{xxx})

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

export default{xxx}

style 想用scss 就

<style lang="scss">
    ...
</style>

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.<anonymous> (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.<anonymous> (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

> specialTemplate@1.0.0 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! specialTemplate@1.0.0 build: 
`npx parcel build index.html  --no-cache --public-url ./`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the specialTemplate@1.0.0 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

<svg class="svgIcon" xmlns:xlink="http://www.w3.org/1999/xlink"  aria-hidden="true">
  <use xlink:href="#icon-shipin"></use>
</svg>

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

引号问题

<g-col span="1"><g-col>
// span 传入的是字符串 "1"
//如何传 数字 1 呢

<g-col :span="1"><g-col>
//span= 后面的引号 是 html的 引号 里面的1 是数字1

//那怎么传字符串呢 下面的三种方法都可以
<g-col :span=" '1' "><g-col>
<g-col :span=" `1` "><g-col>
<g-col :span=' "1" '><g-col>
//外面的引号是html的 引号  里面的引号是 js的引号

Vue轮子笔记

Vue轮子笔记

创建仓库

本地

github

回到本地

CSS

组件

打包工具

parcel

使用git-open 打开远程仓库

报错总结

git 新建分支

引号问题

推荐阅读更多精彩内容