WordPress 和 Vue.js 的学习资源推荐

女爷i 2022-05-01 12:14 213阅读 1赞

# 前言 #

Vue 是一个非常有吸引力的构建前端的框架，它已迅速成为 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快，编写的代码容易阅读和理解，很有乐趣。它对初学者很友好，同时还提供了构建复杂应用和网站所需的基础套件。这对于个人开发者来说非常棒，同时也可以在大型团队中很好地进行协作开发。

### 为什么 Vue 在 WordPress 项目中可以非常出色 ###

不论是为 WordPress 开发小巧实用的功能还是开发一个完整的主题，Vue.js 都是一个合适的解决方案，因为它很轻量。Vue 使用易于理解的 HTML 模板。与其他一些框架不同，你不需要额外的工具即可开始使用。不需要使用webpack，Node.js 或其他配置就可以在网页上引入 Vue 并开始创建组件，而且性能没有任何明显下降。只有当你想要将开发方法提升一个层次时，才需要这些工具。

Vue 在构建用户界面上也更有优势。如果你只是使用纯 JavaScript 或 jQuery，Vue 将帮助你提高效率，减少繁琐的代码。相比之下，一些更复杂的工具有更高的进入门槛，比如 React 和 Angular 这些。在 Vue 中使用 CSS 和动画效果也更容易。通过 Vue 的“单文件组件”，你可以轻松地的把属于同一组件的不同部分合理组织的起来; JavaScript代码、HTML模板和 CSS 都写在同一个文件中，组件的不同部分保持相互独立。如果你已经掌握了JavaScript, HTML, CSS 中的任何一种，那么使用 Vue 可能会感觉更舒畅，在其他框架中编写类似组件的体验可能就并没有这么好了。

Vue 的另一个好处是，通过众多的插件来对 Vue 进行扩展补充也很容易。状态管理有Vuex，路由管理有 vue-router，vue-resource 处理 Web 请求方面提供很多帮助。不必无休止地研究和比较不同的第三方项目的优缺点，例如 Reac t生态系统中的情况（这也是React更庞大的生态系统的缺点）。

### 学习Vue和相关插件的教程 ###

**在线文档：**

*  [Guide to Vue.js ][Guide to Vue.js] 官网必读手册

*  [Vuex是什么？ ][Vuex_] 官网文档

**视频教程：**

*  [Learn Vue2: Step by Step][Learn Vue2_ Step by Step] laracasts上的视频教程，初级部分是免费的.

*  [Vue.js 2 – Getting Started][Vue.js 2 _ Getting Started] 是 Maxedapps 在 Youtube 上的免费视频系列教程。他在Udemy也有付费课程，[Maximilian Schwarzmüller讲授的课程][Maximilian Schwarzm_ller] 非常有价值,

*  [Vue.js 2.0 in 60 minutes][] Traversy Media的最新版教程。这个频道也有点意思：

> Traversy 本人是一个有社交恐惧症的胖子，工作了很久之后决定从头开始学习编程，并成功的成为一个自由职业程序员。他很感激编程这门技术给他带来的一切，所以他也在油管上教授其他人编程。
> 
> 他的特点是及其高产，零基础，语速适中，口齿清晰。可以说是对非英语母语的人来说非常友好。
> 
> 他的课程都是有始有终，始终把听众当作零基础，所以有大量的从零开始课程(Crash Course), 配合上其适合非母语人士的语速和语音，绝对是国人想在油管上学习编程的首选。
> 
> 频道的课程涉猎非常广，但主要集中在前端。对于现在流行的网络应用编程再合适不过了。
> 
> Traversy 的油管频道的内容整理得非常清晰，强烈建议按照播放列表来收看。如果是完全在编程所有方面都是零基础的，还希望对前端有些了解的，强烈建议从 HTML & CSS这个播放列表看起。然后，他每年都会发一篇关于这一年学习编程语言的方法和语言的选择的建议视频，搜索年份号码就能找到了，可以作为自己学习计划很好的参考。

还有其他频道介绍可以看这里：

[那些油管上高质量的学习编程的频道 之一][Link 1]

[那些油管上高质量的学习编程的频道 之二][Link 2]

**图书：**

这两本评价都挺高，有能力的小伙伴可以买来看看

[Vue.js 2 Cookbook: Build modern, interactive web applications with Vue.js (English Edition)][Vue.js 2 Cookbook_ Build modern_ interactive web applications with Vue.js _English Edition]

[Learning Vue.js 2: Learn how to build amazing and complex reactive web applications easily with Vue.js (English Edition)][Learning Vue.js 2_ Learn how to build amazing and complex reactive web applications easily with Vue.js _English Edition]

### WordPress的教程资源 ###

*  [Vue usage in WordPress.][] 作者 Paulund ，用Vue开发WordPress主题的一系列文章，写的很棒，网站也很简洁大方

*  [how to work with Vue & the REST API][how to work with Vue _ the REST API]. 作者 Josh Pollock ，把 Vue 和 WordPress 的API结合实用的教程

*  [Vue inside of the admin while taking advantage of ES6][] 同上

*  [how to create a Vue plugin ][how to create a Vue plugin] 作者 Ramsay Lanier, 关于怎样写Vue插件

### 一些Vue和WordPress结合的项目 ###

*  [experiment for Gutenberg][] 用Vue替代WordPress里的React

*  [offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps.][offline-first SPA using Vue.js_ the WordPress REST API and Progressive Web Apps.] Vue结合WordPress构建单面应用

*  [Wyvern provides WordPress theme boiler plate][] 用Vue开发WordPress主题的脚手架项目

*  [Vue Theme][]用Vue开发的WordPress主题. 已经不更新了

*  [WordVue][] 一个用 Vue 开发 WordPress 主题的入门项目

## One more thing ##

就像前文说的，如果你只是出于兴趣想在个人项目中玩玩 Vue + WordPress，那么其实用过不到Webpack等一系列的重型武器，直接引入Vue.js 就可以，即使用了也不用钻的太深，基本上直接引用Vue提供的官方配置就行了。如果你想在前端开发水平上一个层次，后者在公司项目里使用，那么绝对要学好Webpack了。 Webpack 目前无论在求职还是工作中，使用越来越普及。而想要学懂，学会Webpack更绝非易事。推荐你慕课网这门课，[《从基础到实战 手把手带你掌握新版Webpack4》][_Webpack4]，融合技能+项目+思想 讲解前端开发必学的Webpack，值得花钱好好学一下。本课程完整讲清最新版本下的 Webpack 4 知识体系，通过 基础 + 实例 + 原理代码编写 + 复杂案例分析 完成Webpack4的分析与讲解。更重要的是让你对整个前端项目的构建有一个全局化的认识，实现能力思想双升级。

转自：

[丘壑博客][Link 3]

[bestscreenshot.com/wordpress-a…][bestscreenshot.com_wordpress-a]

##     ##

转载于:https://juejin.im/post/5c6ff85b6fb9a049e063f532

[Guide to Vue.js]: https://link.juejin.im?target=https%3A%2F%2Fvuejs.org%2Fv2%2Fguide%2F
[Vuex_]: https://link.juejin.im?target=https%3A%2F%2Fvuex.vuejs.org%2Fzh%2F
[Learn Vue2_ Step by Step]: https://link.juejin.im?target=https%3A%2F%2Flaracasts.com%2Fseries%2Flearn-vue-2-step-by-step
[Vue.js 2 _ Getting Started]: https://link.juejin.im?target=https%3A%2F%2Fwww.youtube.com%2Fplaylist%3Flist%3DPL55RiY5tL51p-YU-Uw90qQH419BM4Iz07
[Maximilian Schwarzm_ller]: https://link.juejin.im?target=https%3A%2F%2Fwww.udemy.com%2Fuser%2Fmaximilian-schwarzmuller%2F
[Vue.js 2.0 in 60 minutes]: https://link.juejin.im?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DWy9q22isx3U
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000016667405
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000017274784
[Vue.js 2 Cookbook_ Build modern_ interactive web applications with Vue.js _English Edition]: https://link.juejin.im?target=http%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Famazon.cn%2Fgp%2Fproduct%2FB01N6VAO4P%2Fref%253Das_li_tl%253Fie%253DUTF8%2526camp%253D536%2526creative%253D3200%2526creativeASIN%253DB01N6VAO4P%2526linkCode%253Das2%2526tag%253Dbestscreensho-23%2526linkId%253D4e80f8edb011b61fe94a70cf24e5ad39
[Learning Vue.js 2_ Learn how to build amazing and complex reactive web applications easily with Vue.js _English Edition]: https://link.juejin.im?target=http%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Famazon.cn%2Fgp%2Fproduct%2FB01JLBMCAY%2Fref%253Das_li_tl%253Fie%253DUTF8%2526camp%253D536%2526creative%253D3200%2526creativeASIN%253DB01JLBMCAY%2526linkCode%253Das2%2526tag%253Dbestscreensho-23%2526linkId%253Da3ee3fcad5e9a4cbfdce374e94fdce13
[Vue usage in WordPress.]: https://link.juejin.im?target=https%3A%2F%2Fpaulund.co.uk%2Ftags%2Fwordpress-theme
[how to work with Vue _ the REST API]: https://link.juejin.im?target=https%3A%2F%2Ftorquemag.io%2F2017%2F02%2Fintroduction-vuejs-wordpress-rest-api%2F
[Vue inside of the admin while taking advantage of ES6]: https://link.juejin.im?target=https%3A%2F%2Ftorquemag.io%2F2017%2F08%2Fusing-vuejs-es6-wordpress-admin%2F
[how to create a Vue plugin]: https://link.juejin.im?target=https%3A%2F%2Fcodeburst.io%2Fcreating-a-basic-vue-plugin-a-quick-and-practical-example-cb56fa9a7d09
[experiment for Gutenberg]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fyouknowriad%2Fgutenberg-vue
[offline-first SPA using Vue.js_ the WordPress REST API and Progressive Web Apps.]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fbstavroulakis%2Fvue-wordpress-pwa
[Wyvern provides WordPress theme boiler plate]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fmadesane%2Fwyvern
[Vue Theme]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FrtCamp%2FVueTheme
[WordVue]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fitzikbenh%2FWordVue
[_Webpack4]: https://link.juejin.im?target=https%3A%2F%2Fs.imooc.com%2FS6V2BMU
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fbestscreenshot.com%2F
[bestscreenshot.com_wordpress-a]: https://link.juejin.im?target=https%3A%2F%2Fbestscreenshot.com%2Fwordpress-and-vue-guides-resources%2F