起步
从2019年开始学习Vue,这个博客我想将项目中遇到的好的插件的使用方法、踩坑经历总结下来,
便于在以后的项目中使用。
为了更加便于使用,就内容而言,除了在github上可以看到demo的源码,还有在网页中增加了演示的部分。
以后会更新更多我在项目中的踩坑经历、插件使用记录,欢迎来访~
如果觉得我有更多进步的空间,还请包涵和指出喔。
那就先定一个小目标吧~~ 2020年要完成20+篇的分享。
项目部分截图一:
项目部分截图二:
这一篇是讲搭建博客时需要用到的一个生成目录树的插件tree-cli的使用方法和踩坑记录。github上的readme.md也要及时更新才行哇,不然使用方法升级了文档没变,也容易造成困扰呢(捂脸)。
目前项目还没有挂到网上,以后完成更多的时候就会放上去的。想学习Vue的小伙伴可以clone下来看看代码喔(握手)。
搭建Vue项目
这不仅仅是用于分享内容,更是将Vue项目从0到1搭建的一个过程。小伙伴可以将项目clone到本地后运行起来。也可以作为自己博客的工具。
项目运行
克隆到本地后,进入项目文件夹。安装包后运行即可在浏览器中打开9000端口查看到网页~~
git clone https://github.com/Gesj-yean/vue-demo-collection.git
cd vue-demo-collection
npm install
npm run serve
目录说明
这是整个vue-demo-collection的目录说明。随着后续文章的增多,目录也会增多的。
├── public
| ├── favicon.ico // 图标
| └── index.html // 入口html
├── src
| ├── App.vue // 入口vue
| ├── base
| | └── scroll.vue // scroll基础组件
| ├── common
| | ├── images // 图
| | | ├── arrow-left.png
| | | └── arrow-right.png
| | ├── js // js
| | └── stylus
| | ├── base.styl // 基础样式
| | ├── mixin.styl // 混入样式
| | ├── reset.styl // 重置样式
| | └── variable.styl // 主题样式
| ├── components
| | └── scroll-vertical-apply.vue // 应用
| ├── main.js // 入口js
| ├── router
| | └── index.js // 路由配置
| └── views
| ├── home.vue // 主页
| ├── scroll-vertical.vue // scroll垂直滚动blog页面
| ├── start.vue // 开始blog页面
| └── tree-cli.vue // tree-cli使用blog页面
├── babel.config.js // babel配置
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js // vue配置
总结
这个项目是我在写了很多技术总结后,想要把他们统一起来,顺便再github上跟大家分享后的结果。如果里面的总结对你有用的话,可酌情考虑一个star。算是对我小菜鸟前端的一点点鼓励叭!
如果项目中有可以优化的地方欢迎指出,可太感谢啦。戳它吧!https://github.com/Gesj-yean/vue-demo-collection