这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了使用 Vue.js 创建一个时间跟踪的单页应用的相关资料, 非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
Vue.js 很简单。正因为如此简单,人们常常认为其适合于小项目。虽然真正的 Vue.js 核心知识只是一个视图层库,实际上有一组工具,将使您能够使用 Vue.js 构建完整的大规模 SPA(单页应用程序)。
SPA 应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应。还有好的副作用,SPA 还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的。
从开发人员的角度来看,SPA 和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应用程序。通常,我们需要处理路由,数据获取和持久性,查看渲染和必要的构建设置,以便于模块化代码库。
对于基于 Vue.js 的 SPA,下面工具将帮助你:
1. 视图层:Vue.js
2. 路由:vue-router,Vue 的官方路由器
3. 状态管理:vuex,受 Flux/Redux 启发的状态管理解决方案
4. 服务通讯:vue-resource 这是和 RESTful 后端交互的接口
5. 构建工具:Webpack 和 vue-loader 进行模块 热刷新 ES2015 和预处理器等重要的组件
视图层
本系列假设您已经熟悉 Vue.js 的基础知识,将 Vue.js 用于大型 SPA 时的核心概念是:将应用程序分为许多嵌套的自定义组件。在数据流的组件熟悉 props 和通讯定义事件直接进行平衡设计,将复杂组件切分为小型解耦的单元,更易于维护。
路由器
官方 VUE 路由器库处理客户端的路由,同时支持哈希模式和 html5 的历史模式。它与独立路由库有点不同,它与 Vue.js 深度集成,并假设我们将嵌套路由映射到嵌套 Vue 组件。
当使用 vue-router 时,我们将组件作为 "pages" 实现,使用这些组件能够实现党路由变化时,钩子函数被调用。
状态管理
状态管理是只有当应用程序复杂性超过一定水平时才出现。当有多个组件需要共享可变的应用程序状态时,如果您的应用程序中没有专用于管理此类共享状态的层,则可能很难推理和维护。
服务器通信
在本案例中,我们会使用 RESful 后端,这是一个 Go 语言编写的 go-vue-event 项目
构建工具
首先,整个编译工具链依靠的 Node.js ,管理所有使用库包和工具依赖 NPM 。 虽然 NPM 开始是 Node.js 后端模块的包管理器,但它现在也广泛用于前端包管理。 因为所有 NPM 包是使用 CommonJS 模块格式创建的,我们需要一个特殊的工具将这些模块 "捆绑" 到适合最终部署的文件中。 Webpack 就是这样一个工具,你可能也听说过一个类似的工具 Browserify。
我们将使用 Webpack 的系列,因为它提供了更多的高级功能开箱即用,如热重新加载,bundle-splitting 和静态文件处理。
无论 WebPACK 中和 Browserify 它们暴露的 API,使我们能够装载更多的 CommonJS 的模块:例如,我们可以直接 require() 的 HTML 文件通过将其转化成一个 JavaScript 字符串。
通过将你的前端的一切,包括 HTML,CSS 甚至图像文件看作为模块依赖,可以在捆绑过程中任意转换,Webpack 实际上涵盖了构建 SPA 时遇到的大多数构建任务。 我们主要是要使用 WebPACK 和普通 NPM 脚本 ,而不需要 任务运行器如 Gulp 或 Grunt。
使用 vue-loader 激活单页中 Vue 组件:
- //app.vue
- < template > <h1 class = "red" > {
- {
- msg
- }
- } < /h1>
- </template > export
- default {
- data() {
- return {
- msg:
- 'Hello world!'
- }
- }
- } < style > .red {
- color: #f00;
- } < /style>/
WebPACK 和 vue-loader 组合能带来:
:
1. 默认情况下 ES2015。 这允许我们今天使用未来的 JavaScript 语法,产生更具表达性和简洁的代码。
2. 预埋处理器 。 您可以在单文件 Vue 组件中使用预处理器,例如使用 Jade 作为模板,使用 SASS 作为样式。
3.Vue 组件内部 CSS 输出将自动加前缀。 您也可以使用任何 PostCSS 插件,如果你喜欢。
4. 作用域 CSS。 通过增加一个 scoped 属性添加到 <style> ,VUE-loader 将通过重写模板和样式模拟输出,特定组件的范围内的 CSS 不会影响应用程序的其他部分。
5. 热刷新 。在开发过程中编辑 Vue 组件时,组件将 "热切换" 到正在运行的应用程序中,在不重新加载页面的情况下维护应用程序状态。 这极大地提高了开发体验。
开始设置
现在有了所有这些花哨的功能,对于自己组装构建栈可能是一个非常艰巨的任务! 幸运的是,Vue 公司提供 vue-cli ,一个命令行界面,十分容易上手:
- npm install -g vue-cli
- vue init webpack my-project
回答提示,CLI 具有开箱即用特点。 所有你需要做的下一步是:
- cd my-project
- npm install # install dependencies
- npm run dev # start dev server at http://localhost:8080
以上所述是小编给大家介绍的使用 Vue.js 创建一个时间跟踪的单页应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0510/330105.html