Vue轮子笔记

2018-06-29  本文已影响222人  xingkong_s

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

仓库点击 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部分支持

组件

vue.component("",{xxx})

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

export default{xxx}

style 想用scss 就

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

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

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

打包工具

./node_modules/.bin/parcel --no-cache

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

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

版本控制

npm i git-open

git open

报错总结

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 -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 /home/xingkongs/Desktop/gulu-demo/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 (/home/xingkongs/Desktop/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/xingkongs/Desktop/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/xingkongs/Desktop/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:232:14)
    at FSWatcher.NodeFsHandler._handleFile (/home/xingkongs/Desktop/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:259:21)
    at FSWatcher.<anonymous> (/home/xingkongs/Desktop/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:480:21)
    at FSReqWrap.oncomplete (fs.js:153:5)

或者

Error: ENOSPC: no space left on device, watch '/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/type-check/package.json'
    at FSWatcher.start (fs.js:1409:26)
    at Object.fs.watch (fs.js:1446:11)
    at createFsWatchInstance (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:232:14)
    at FSWatcher.NodeFsHandler._handleFile (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:259:21)
    at FSWatcher.<anonymous> (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:480:21)
    at FSReqWrap.oncomplete (fs.js:185:5)
Emitted 'error' event at:
    at FSWatcher._handleError (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/node_modules/chokidar/lib/nodefs-handler.js:39:5)
    at setFsWatchListener (/media/xingkongs/0006C9C0000A400A/private/gulu-demo/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

$ 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 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

Can't resolve 'sass-loader'

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

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

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的引号
上一篇下一篇

猜你喜欢

热点阅读