vue不用build的使用实例分析
导读:本文共2812.5字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 应用程序设计作为一个谨慎的程序员,我希望从一开始就正确地构造应用程序。在用户界面中有以下元素:headermain areafooter我希望将每个组件定义为一个单独的组件。我希望将他们的代码放在单独的模块中,以便于识别和使用。在一个典型的 Vue JS 设置中,您将使用 .vue 的单组件文件。不幸的是,这需要一个基于 webpack、 rollup 等的构建... ...
目录
(为您整理了一些要点),点击可以直达。作为一个谨慎的程序员,我希望从一开始就正确地构造应用程序。在用户界面中有以下元素:
header
main area
footer
我希望将每个组件定义为一个单独的组件。我希望将他们的代码放在单独的模块中,以便于识别和使用。
在一个典型的 Vue JS 设置中,您将使用 .vue 的单组件文件。不幸的是,这需要一个基于 webpack、 rollup 等的构建过程。事实证明,您可以在不使用任何构建过程的情况下获得几乎相同的体验!它可能不像原来的协议那么全面,但是对于许多简单的场景来说还是不错的。更重要的是,它没有常规构建过程和 CLI 工具引入的复杂性和依赖性。
该项目的结构如下:
我们的逻辑 UI 组件清楚地反映在项目的目录结构中。
当浏览器加载 index. html 时,会发生以下情况:
Vue JS 库是从 CDN 库中获取的 unpkg.com/vue
获取组件样式
应用程序模块从 index.js 导出然后被执行
注意我们是如何使用 < script type = " module" & 来告诉浏览器我们正在加载所有花里胡哨的现代 ES6 代码!
当执行 index.js 时,它会导入包含我们的组件的后续模块:
这些组件与常规的 Vue JS 单文件组件没有多大区别。它们可以拥有 Vue JS 组件的所有特性和功能,比如:
因为没有构建过程,我们的组件必须以不同的方式组合在一起。现代的 JavaScript 特性在这方面对我们有所帮助。与打包相反,我们可以在任何需要的地方import
所需的依赖项。经过这么多年不费脑筋的打包浏览器终于知道如何导入模块; 然后,我们将使用 JS 模板文本代替template。
组件代码的结构如下:
主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记,比如 < app-header > 或 < app-footer > 。
然后使用这些自定义标记在 index. html 文件中构建应用程序 UI。我们最终得到了一个简单易懂的用户界面:
一个不那么琐碎的应用程序通常会有一大堆视图,用户可以导航到这些视图。事实证明,Vue 路由器在我们的设置中工作,没有任何问题。您可以像定义任何其他组件一样定义视图或页面,使用上面描述的相同方法。然后,不要将这些组件注册为自定义标记,而是用标准的方式将它们链接到路由,例如:
然后获取 Vue Router 库并在 index. html 中添加路由器占位符:
最后,在 index.js 中将路由器与应用程序一起初始化:
现在,您可以通过输入 URL、使用 < router-link > 组件或以编程方式导航到这两个页面。
vue不用build的使用实例分析的详细内容,希望对您有所帮助,信息来源于网络。