网站建设与管理赚钱吗,喀什网站建设公司,采购软件,做韦恩图的在线网站#介绍
在很多 Vue 项目中#xff0c;我们使用 app.component 来定义全局组件#xff0c;紧接着用 app.mount(#app) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好#xff0c;在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的…
#介绍
在很多 Vue 项目中我们使用 app.component 来定义全局组件紧接着用 app.mount(#app) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中或者你的前端完全由 JavaScript 驱动的时候下面这些缺点将变得非常明显 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复字符串模板 (String templates) 缺乏语法高亮在 HTML 有多行的时候需要用到丑陋的 \不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时CSS 明显被遗漏没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript而不能使用预处理器如 Pug (formerly Jade) 和 Babel
所有这些都可以通过扩展名为 .vue 的 single-file components (单文件组件) 来解决并且还可以使用 webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue 的简单实例 现在我们获得 完整语法高亮CommonJS 模块组件作用域的 CSS
正如我们说过的我们可以使用预处理器来构建简洁和功能更丰富的组件比如 PugBabel (with ES2015 modules)和 Stylus。 这些特定的语言只是例子你可以只是简单地使用 BabelTypeScriptSCSSPostCSS 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 vue-loader 使用 webpack它也能为 CSS Modules 提供头等支持。 #怎么看待关注点分离
一个重要的事情值得注意关注点分离不等于文件类型分离。在现代 UI 开发中我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里其模板、逻辑和样式是内部耦合的并且把他们搭配在一起实际上使得组件更加内聚且更可维护。
即便你不喜欢单文件组件你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。 !-- my-component.vue --templatedivThis will be pre-compiled/div/templatescript src./my-component.js/scriptstyle src./my-component.css/style#起步 #例子沙箱
如果你希望深入了解并开始使用单文件组件请来 CodeSandbox 看看这个简单的 todo 应用。 #针对刚接触 JavaScript 模块开发系统的用户
有了 .vue 组件我们就进入了高阶 JavaScript 应用领域。如果你没有准备好的话意味着还需要学会使用一些附加的工具 Node 包管理器 (npm) 阅读 Getting Started guide 中关于如何从注册地 (registry) 获取包的章节。现代 JavaScript 与 ES2015/16阅读 Babel 的 Learn ES2015 guide。你不需要立刻记住每一个方法但是你可以保留这个页面以便后期参考。
在你花一天时间了解这些资源之后我们建议你参考 Vue CLI。只要遵循指示你就能很快地运行一个带有 .vue 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目 #针对高阶用户
CLI 会为你搞定大多数工具的配置问题同时也支持细粒度自定义配置项。
有时你会想从零搭建你自己的构建工具这时你需要通过 Vue Loader 手动配置 webpack。关于学习更多 webpack 的内容请查阅其官方文档和 Webpack Academy。
