Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/waylau/vuejs-enterprise-application-development

Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码
https://github.com/waylau/vuejs-enterprise-application-development

vue vue3 vuejs vuejs3

Last synced: 19 days ago
JSON representation

Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码

Awesome Lists containing this project

README 

        
# Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码



![](images/logo.png)



*Vue.js Enterprise Application Development*, is a book about how to develop Vue.js applications.



《跟老卫学Vue.js开发》是一本Vue.js应用开发的开源学习教程，主要介绍如何从0开始开发Vue.js应用。本书包括最新版本Vue.js 3中的新特性。图文并茂，并通过大量实例带你走近 Vue.js 的世界！



本书业余时间所著，水平有限、时间紧张，难免疏漏，欢迎指正，



## Summary 目录



* [开启第一个Vue.js 3应用](https://developer.huawei.com/consumer/cn/forum/topic/0201493946596180265?fid=23)

* [探索Vue 3应用](https://developer.huawei.com/consumer/cn/forum/topic/0201493947940070266?fid=23)

* [Vue 3使用TypeScript](https://developer.huawei.com/consumer/cn/forum/topic/0202494862427410279?fid=23)

* [Vue 3组件与Web组件的异同点](https://developer.huawei.com/consumer/cn/forum/topic/0202525033799260635?fid=23)

* [Vue 3动态组件详解](https://developer.huawei.com/consumer/cn/forum/topic/0204533696955760004?fid=23)

* [Vue 3模板的基本概念](https://developer.huawei.com/consumer/cn/forum/topic/0204534591566950006?fid=23)

* [Vue 3模板的插值](https://developer.huawei.com/consumer/cn/forum/topic/0204534592593360007?fid=23)

* [Vue 3模板的指令](https://developer.huawei.com/consumer/cn/forum/topic/0203534593037900023?fid=23)

* [Vue 3渲染函数](https://developer.huawei.com/consumer/cn/forum/topic/0202569044433010792?fid=23)

* [Vue 3响应式侦听之watchEffect详解](https://developer.huawei.com/consumer/cn/forum/topic/0202592486629670299?fid=23)

* [Vue 3响应式侦听之watch详解](https://developer.huawei.com/consumer/cn/forum/topic/0201592487366740327?fid=23)

* [Vue 3路由之理解路由的概念](https://developer.huawei.com/consumer/cn/forum/topic/0201593292552200381?fid=23)

* [Vue 3路由之一个路由的例子](https://developer.huawei.com/consumer/cn/forum/topic/0201593293503540382?fid=23)

* [Vue 3路由之动态路由的例子](https://developer.huawei.com/consumer/cn/forum/topic/0202593294158850353?fid=23)

* [Vue 3使用Ant Design Vue](https://developer.huawei.com/consumer/cn/forum/topic/0202594139680670396?fid=23)

* [Vue 3使用Naive UI](https://developer.huawei.com/consumer/cn/forum/topic/0201597875896130615?fid=23)

* [Vue 3通过事件实现组件之间的通信](https://developer.huawei.com/consumer/cn/forum/topic/0201599974181330742?fid=23)

* [Node.js更新到17版本后应用启动报错“error:0308010C:digital envelope routines::unsupported”问题的解决](https://developer.huawei.com/consumer/cn/forum/topic/0202766264354680160?fid=23)

* 未完待续...



## Samples 示例



* [Hello World](samples/hello-world)

* [Hello World add TypeScript](samples/hello-world-add-ts)

* [Hello World with TypeScript](samples/hello-world-with-ts)

* [TypeScript Demos](samples/typescript-demos)

* [生命周期钩子的例子](samples/vue-lifecycle)

* [Vue.js组件的示例](samples/basic-component)

* [组件的复用](samples/basic-component-reusable)

* [监听子组件事件](samples/listen-for-child-component-event)

* [通过插槽分发内容](samples/slot-to-serve-as-distribution-outlets-for-content)

* [动态组件](samples/dynamic-component)

* [keep-alive使用示例](samples/dynamic-component-with-keep-alive)

* [模板插值](samples/template-syntax-interpolation)

* [指令](samples/template-syntax-directive)

* [指令缩写](samples/template-syntax-directive-shorthand)

* [计算属性](samples/computed-basic)

* [侦听器](samples/watch-basic)

* [绑定HTML class](samples/bind-class)

* [绑定内联样式](samples/bind-style)

* [条件表达式](samples/expression-conditional)

* [for循环表达式](samples/expression-for)

* [for循环表达式的不同使用场景](samples/expression-for-scene)

* [事件](samples/event-basic)

* [通过事件实现组件之间的通信](samples/event-communication)

* [多事件处理器](samples/event-muti)

* [表单输入绑定的基础用法](samples/form-input-binding)

* [表单输入绑定的值绑定](samples/form-input-binding-value-binding)

* [表单输入绑定的修饰符](samples/form-input-binding-modifier)

* [组件局部注册](samples/component-local-registration)

* [组件模板引用](samples/component-template-ref)

* [组件prop](samples/component-prop)

* [组件非prop的attribute](samples/component-attribute)

* [组件自定义事件](samples/component-custom-event)

* [组件插槽后备内容](samples/component-slot)

* [组件具名插槽](samples/component-slot-named)

* [组件依赖注入](samples/component-provide-inject)

* [异步组件](samples/component-async)

* [基于class的动画的例子](samples/transitions-class)

* [与style绑定的过渡的例子](samples/transitions-style)

* [自定义过渡class类名的例子](samples/transitions-custom-class)

* [列表过渡的例子](samples/transitions-list)

* [混入示例](samples/mixins-basic)

* [自定义指令](samples/directive-custom)

* [动态指令参数](samples/directive-dynamic-argument)

* [动态指令绑定对象字面量](samples/directive-object-literal)

* [传入的基本例子](samples/tteleport-basic)

* [与组件一起使用的例子](samples/teleport-with-component)

* [在同一目标上使用多个传送的例子](samples/teleport-muti)

* [渲染函数](samples/render-function)

* [h()生成子代VNode的例子](samples/render-function-children)

* [JavaScript代替v-if和v-for](samples/render-function-js-if-for)

* [Mocha单元测试的例子](samples/unit-test-mocha)

* [ref的使用](samples/reactivity-ref)

* [使用watchEffect侦听变化、停止侦听](samples/reactivity-computed-watcher-watcheffect)

* [使用watch侦听多个数据源、数组](samples/reactivity-computed-watcher-watch)

* [静态路由](samples/routing-basic)

* [使用Ant Design Vue](samples/ant-design-vue-button)

* [使用Naive UI](samples/naive-ui-button)

* [“新闻头条”骨架](samples/news-headlines-skeleton)

* [“新闻头条”首页](samples/news-headlines-home)

* [“新闻头条”导航栏](samples/news-headlines-navigater)

* [“新闻头条”完整版](samples/news-headlines)

* 未完待续...



以下是部分示例截图：



![](images/001.png)



![](images/002.png)



## Get start 如何开始阅读



选择下面入口之一：



*  的 [README.md](https://github.com/waylau/vuejs-enterprise-application-development/blob/master/README.md)



## Code 源码



书中所有示例源码，移步至的 `samples` 目录下，代码遵循《[Java 编码规范]()》



## Book 配套书籍



如果你喜欢本开源书，也请支持下该书的正式出版物《[Vue.js 3企业级应用开发实战](https://waylau.com/vuejs-enterprise-application-development/)》。



实体店及各大网店有售。



* 京东：

* 当当：



## Issue 意见、建议



如有勘误、意见或建议欢迎拍砖 



## Contact 联系作者



* Blog: [waylau.com](http://waylau.com)

* Gmail: [waylau521(at)gmail.com](mailto:[email protected])

* Weibo: [waylau521](http://weibo.com/waylau521)

* Twitter: [waylau521](https://twitter.com/waylau521)

* Github : [waylau](https://github.com/waylau)



## Support Me 请老卫喝一杯



![开源捐赠](https://waylau.com/images/showmethemoney-sm.jpg)