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部分支持
组件
- 子组件安装
如果一个包是给用户使用的 就不需要 -D
如果是给开发者使用的 就使用 -D
-D developer 开发者的意思 - 子组件
单文件组件 就需要三个东西
template、script、style
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)
打包工具
./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 报错
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
- 运行 npx parcel报错
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
- 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
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的引号
网友评论