适用于初学者的Vue.js教程:学习基础知识并使用此入门Vue结构

适用于初学者的Vue.js教程:学习基础知识并使用此入门Vue结构

适用于初学者的Vue.js教程:学习基础知识并使用此入门Vue结构
СОДЕРЖАНИЕ
02 июня 2020

适用于初学者的Vue.js教程


每当您在开发流程中开始使用新技术时,您可能会感到至少有些害怕。尤其是在野外有无数个npm软件包的情况下。混合和匹配事物有时会花费很多时间和精力,并且通常令人沮丧. 这是以下针对初学者的Vue.js教程发挥作用的地方.

什么是Vue.js?你为什么要在意?

Vue.js或简称Vue是用于构建用户界面的JavaScript框架。与Angular或React之类的其他框架相比,Vue更易于接近并且学习曲线不那么陡峭.

Vue也是模块化的,可让您将代码拆分为可重用的组件。他们每个人都有自己的HTML标记,CSS和JavaScript代码.

此Vue.js教程的范围是什么?

这段简短的Vue.js教程的目的是为您提供一些可在其上构建和试验Vue的脚手架。我们将研究WordPress仪表板内Vue应用程序的基本设置.

(请注意;我们不会在本指南中教您Vue本身,但是您可以继续并从中了解有关该框架的更多信息 官方指南 在这里设置项目后–完成后,您可以继续在该项目上进行实验。另外,我们推荐一些最有趣的Vue UI组件库,这些库可使开发过程更高效。)

我们要做的是使用Vue为WordPress插件使用预定义的模板。如果想更深入地了解,可以在以下GitHub存储库中找到它: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js教程:先决条件

您应该已经在计算机上进行了一些设置,以继续遵循本指南:

首先,您将需要一个LAMP堆栈–您可以在Windows或Mac上使用XAMPP,或者在Mac上使用Flywheel的Local,然后为自己设置新的本地WordPress安装.

确保你有 NodeJS包管理器 (npm)安装在您的计算机上。您还需要通过终端安装另外两个软件包– Vue CLI和Vue模板初始化工具。像这样:

$ npm install -g @ vue / cli
$ npm install -g @ vue / cli-init

安装这两个依赖项之后,您需要将活动目录更改为本地WordPress实例的wp-content / plugins目录,然后在其中运行以下命令:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

接下来,系统将提示您回答有关项目设置的一些问题.

对于“构建”提示,请继续并立即选择第一个选项 "运行时+编译器:建议大多数用户使用".

您可以根据需要启用ESLint linter。它会检测您项目中的任何棉绒错误,但您现在不必为此担心.

Commit Lint和Pre-Commit Hooks旨在在将提交发送到GitHub之前检查您的提交消息和代码-保持所有内容整齐且格式正确.

完成后,您将最终得到一个看起来大致像这样的终端:

您可以继续并按照屏幕上的说明进行操作。将目录更改为新生成的插件目录,然后运行终端提示中显示的命令。这将使您的应用程序启动并运行,等待代码中的更改,并将Vue代码转换为JavaScript.

它有什么作用?

不多。这只是一个显示后端数据的基本应用程序。引擎盖下没有太多Vue。您可以转到“插件仪表板”页面并激活它。它将在“管理菜单”中添加一个新页面。导航到该页面后,您将找到包含两个字符串的仪表板页面:

插件脚手架结构

让我们看一下新生成的插件的文件结构。我们将忽略此Vue.js教程中的大多数配置文件,以便我们专注于应用程序的结构:

首先,我们有plugin.php文件,这是实际插件的入口。在这里,我们有主要 插入 类。这是包含和运行应用程序主要组件的地方.

接下来,是package.json文件,其中定义了所有依赖项以及许多其他项目信息。您可能感兴趣的部分生活在 "剧本" 领域。在那里,您可以使用npm run前缀运行所有命令。到目前为止,重要的应该是npm run dev(构建用于开发的应用程序)和npm run build(一旦准备好将应用程序部署用于生产,就应该运行)。其他命令与这两个命令相邻,或执行其他您现在无需担心的事情.

在includes目录中,有三个文件:

  • rest.php类目前无法执行任何操作,但是您已经具有添加RestAPI路由的结构
  • asset.php类处理样式和脚本入队。在这里,JavaScript文件已本地化以将启动数据从PHP传递到我们的Vue应用程序。目前,仅发送了两个文本,但是您可以包含任何您想要的内容.
  • admin.php文件是负责在仪表板中添加新页面并呈现实际插件页面的文件。您会注意到,应用程序本身就像在plugin_page()函数中的两个空标签一样呈现。那是因为JavaScript会在加载后处理应用程序的实际呈现.

在资产目录中,您将找到另外四个目录:

  • src目录– Vue应用程序的源文件,我们将在后面讨论.
  • scss目录–我们从中生成CSS样式表的SCSS样式文件.
  • js目录–从src目录中的文件生成的转码代码.
  • css目录– SCSS文件中的已编译样式.

src目录和Vue模板文件

在此目录中,有两个文件:main.js和App.vue。 main.js文件是应用程序的入口点。它将Vue应用程序组件附加到具有相应ID的DOM元素.

/ * jshint esversion:6 * /
从“ vue”导入Vue
从“ ./App.vue”导入应用

window.addEventListener(’load’,function(){
新Vue({// eslint-disable-line no-new
el:“#mvdp-app”,
组件:{App},
渲染:(h)=> h(应用程式)
})
})

实际的应用程序标记位于App.vue模板内部:

/ * jshint esversion:6 * /

{{this.strings.title}}

{{this.strings.description}}

/ *全局MVDP * /
导出默认值{
数据(){
返回{
字符串:MVDP.strings
}
},
名称:“ App.vue”
}

您可以在上面的代码片段中看到我们正在使用在Assets类中本地化的字符串。 Vue的一大特点是组件代码被整齐地组织为模板,脚本和样式,从而易于理解结构.

就是这样,您现在有了一个坚实的起点,无论您想使用Vue.js进一步开发什么!我希望这个Vue.js教程对您有所帮助.

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

布局,演示和编辑,Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector