精华内容
下载资源
问答
  • vue笔记一:Vue技术栈

    2021-05-13 15:14:02
    目录vue笔记一:Vue技术栈1、node.js2、 npm3、ES64...vue笔记一:Vue技术栈 1、node.js 如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。 node.j

    vue笔记一:Vue技术栈

    1、node.js

    如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment),这就是node.js。

    node.js是对Chrome V8引擎进行了封装,是一个能让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

    2、 npm

    node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
    npm会根据package.json配置文件中的插件名称和对应的版本号的依赖配置,通过npm install命令来下载插件,下载后自动放在node_modules目录下面。

    3、ES6

    Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。

    4、Babel

    一款将ES6代码转化为浏览器兼容的ES5代码的插件。

    5、项目构建工具vue-cli

    脚手架工具,搭建开发所需要的环境和自动生成Vue项目的生成目录架构。

    6、路由vue-router

    创建单⻚应⽤,我们的单⻚应⽤只做路由切换,组件拼凑成的 ⻚⾯映射成路由 路由是我们单⻚应⽤的核⼼插件

    7、状态管理vuex

    状态管理库,可理解为全局数据集中地推荐⼩项⽬尽量别⽤vuex,会显得有点繁琐,bus总线机制完全可以处理了。用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。

    8、http请求⼯具axios

    ⼀个经过封装的ajax,可以根据⾃⼰的项⽬情况再进⾏封装 axios是经过了ES6的promise封装的

    9、文件打包工具webpack

    可以将我们的前端项目文件统一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。
    将TypeScript、SCSS、LESS、stylus(CSS预处理器)等不能直接被浏览器解析的技术,翻译成浏览器可以直接解析的代码。
    在这里插入图片描述

    10、Vue.js

    它是一个轻量级的MVVM框架。

    响应式:页面响应数据变化

    编程范式:声明式编程(js是命令式编程)

    数据双向绑定(当修改视图时数据也会赋值给model,当更改model的时候也会反应到视图上)。

    在这里插入图片描述

    Vue实例

    var vm = new Vue({
      // 选项
      el:"#app",  //挂载要管理的元素,【string(CSS 选择器)| Element(HTMLElement 实例)】只在用 new 创建实例时生效。
      data:{     //定义数据,【Object | Function】组件的定义只接受 function
      	message:'hello world',
      },
      methods:{  //方法【{ [key: string]: Function }】,不应该使用箭头函数来定义 method 函数 
       plus: function () {
          this.a++
        }
      }
    })
    
    

    虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

    当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

    值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property,比如:vm.b = 'hi' ,那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

    data: {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }
    

    这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化。Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

    在实例挂载之后,el ,data元素可以用 vm.$el ,vm.$data访问。

    vue生命周期以及不同生命周期下的应用

    生命周期:一个对象从创建到消亡的过程。

    生命周期钩子:created、mounted、updated、destroyed

    在这里插入图片描述

    以上是vue官网上的生命周期的方法,大致划分一下分为创建前/后,挂载前/后,更新前/后,销毁前/后这四个阶段。各个阶段的状态总结如下:

    beforeCreate:在beforeCreate生命周期执行时,data和methods中的数据还未初始化,所以此时不能使用data中的数据和methods中的方法

    created:data 和 methods初始化完毕,此时可以使用methods 中的方法和data 中的数据

    beforeMount:template模版已经编译好,但还未挂载到页面,此时页面还是上一个状态

    mounted:此时Vue实例初始化完成了,DOM挂载完毕,可以直接操作dom或者使用第三发dom库

    beforeUpdate: 此时data已更新,但还未同步页面

    updated:data和页面都已经更新完成

    beforeDestory:Vue实例进入销毁阶段,但所有的 data 和 methods ,指令, 过滤器等都处于可用状态

    destroyed: 此时组件已经被销毁,data,methods等都不可用

    根据以上介绍,页面第一次加载时会执行 beforeCreate, created, beforeMount, mounted这四个生命周期,所以我们一般在created阶段处理http请求获取数据或者对data做一定的处理, 我们会在mounted阶段操作dom,比如使用jquery,或这其他第三方dom库。其次,根据以上不同周期下数据和页面状态的不同,我们还可以做其他更多操作,所以说每个生命周期的发展状态非常重要,一定要理解,这样才能对vue有更多的控制权。

    展开全文
  • vue技术栈

    2019-09-06 11:02:02
    我们在考虑vue的项目技术栈的前提是我们需要了解vue的全家桶都有什么,做什么用的: vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图...

    vue全家桶

    我们在考虑vue的项目技术栈的前提是我们需要了解vue的全家桶都有什么,做什么用的:

    vue

    是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    vuex

    Vuex 是什么?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

    什么情况下我应该使用 Vuex?

    虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    Vuex如何去配置,那些东西应该放在store?State、Getters、Mutations、Actions、Module如何去处理?

     

     

    vue-loader

    使用预处理器

    在 webpack 中,所有的预处理器需要匹配对应的 loader。vue-loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 属性自动推断出要使用的 loader。

     

     

     vue-router

    用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

    vue-router应该如何去分配,怎么做才是最优的,传递参数是采用params的方式还是query的方式.

     

     

     vux

    Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

    基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。

    vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

    vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用,实用,美观的移动端UI组件库。

     

    webpack

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

    webpack-dev-server

    单元测试Jest

    Jest是Facebook开发的一个对javascript进行单元测试的工具,之前仅在其内部使用,后开源,并且是在Jasmine测试框架上演变开发而来,使用了我们熟知的expect(value).toBe(other)这种断言格式。

     

    eslint

    ESLint 是一个开源的 JavaScript 代码检查工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

    使用Nightwatch进行E2E测试

    E2E(end to end)测试是指端到端测试又叫功能测试,站在用户视角,使用各种功能、各种交互,是用户的真实使用场景的仿真。在产品高速迭代的现在,有个自动化测试,是重构、迭代的重要保障。对web前端来说,主要的测试就是,表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。

    详情点击这里

    Vue调试神器vue-devtools安装

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。

    前端调试工具vConsole

     

    axios

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    好了,了解了这些,我们可以进行开发啦

    展开全文
  • vue 技术栈 豆瓣api = 豆瓣电影
  • 本文适合对vue技术栈和前端工具化、工程化感兴趣的朋友。 整体架构 CRM系统的服务端是基于node的,前端是以vue技术栈为主的。前端部分整体架构图如下: 应用层 整体前端应用层基于vue技术栈的传统三大件: 路由层...

    前言

    主要介绍云课堂前端在CRM系统的前端建设方面的经验总结,方便其他前端人做技术选型,全栈工程师快速建站。本文适合对vue技术栈和前端工具化、工程化感兴趣的朋友。


    整体架构

    CRM系统的服务端是基于node的,前端是以vue技术栈为主的。前端部分整体架构图如下:

    应用层

    整体前端应用层基于vue技术栈的传统三大件:

    • 路由层由vue-router统一管理。
    • 基础组件库则是选择了基于vue的elementui。同类型的组件库还有bootstrap-vueant-design-vue等。
    • 数据store管理则采用了vue官方推荐的vuex来全局维护store。其他数据管理方案可以采用mobx配合mobx-vue来局部管理多个store。

    至于util库则是选择了传统的lodash。当然你也可以选择完全基于函数式编程范式的ramda和基于ts构建的remeda

    至于发送请求的库,我们选择了axios,其方便的拦截处理和插件拓展功能非常实用。也有其他备选方案如requestsuperagent

    工具层

    在应用层的选型维度之外,我们也进行了一些工具化的建设。

    在mock数据方面,虽然配合axios的axios-mock-adapter很好用,但是其限制了使用范围(必须和axios配合),并且需要进行额外的逻辑侵入。结合网易自研的nei的编辑优势和webpack-dev-server的方便配置,团队自研了http-mocker,提高mock的体验和效率。通过可视化界面编辑数据,并灵活切换远程本地代理,达到mock的效果。

    在工程构建方面,选择了业界主流的webpack作为打包工具。这里需要注意的是,为了优化加载文件大小,需要好好利用其code splitting功能。

    在工程组件模板方面,团队自研了yoso,动态切换github和gitlab模板库,方便程序员同时为社区和企业做贡献。

    在一些其他的格式化管理方面,充分利用了git钩子,基于husky做了一系列优化,后面会具体谈到。

    测试

    针对应用的质量,我们进行了组件和util维度的单元测试、数据状态管理的单元测试和部分重要逻辑的UI自动化测试。

    针对组件和util的单元测试,我们基于由Facebook出品的jest,传统的mochachai还有覆盖率工具istanbul需要自己去单独引用,配置较为繁琐。而jest则全套集成,方便快捷。

    针对重要的基础组件,基于jest-serializer-vue配合jest的快照测试功能,来确保模板的输出结果一致性。

    针对Vuex的数据状态管理的测试,个人认为其重要性仅次于util,这里推荐一个自己参与开发的工具vue-test-actions,可以简化很多重复的逻辑。

    针对UI自动化的测试,基于无头浏览器puppeteer,以及jest对应的插件jest-puppeteer。这里也可以选择cypress,虽然可视化的体验更好,但是也更加重型。而个人觉得既然单元测试选择了jest,通过jest-puppeteer来配合puppeteer也可以达到需求。

    可维护、美化

    我们在git钩子中通过husky配合lint-staged可以做很多有意义的事情,这里列举几个实例。

    代码美化

    在commit阶段,通过prettier,对代码进行指定格式的修改和美化,配置方式如下:

      "lint-staged": {
        "src/*.js": [
          "prettier --write",
          "git add"
        ]
      },
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
    

    校验commit信息

    校验commit信息是否符合规范,这里我们采用了AngularJS Git Commit Message Conventions,严格语义的提交信息,可以在工具化时做很多事情,比如说配合conventional-changelog通过获取git元数据自动生成changelog等。

    配置如下:

      "husky": {
        "hooks": {
          "commit-msg": "node build/verifyCommitMsg.js"
        }
      }
    

    verifyCommitMsg.js文件内容如下:

    const color = require('chalk');
    const msgPath = process.env.HUSKY_GIT_PARAMS
    const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
    
    const commitRE = /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?$)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50})/
    
    if (!commitRE.test(msg)) {
      console.log()
      console.error(
        `  ${color.bgRed(' ERROR ')} ${color.red(`invalid commit message format.`)}\n\n` +
        color.red(`  Proper commit message format is required for automated changelog generation. Examples:\n\n`) +
        `    ${color.green(`feat(compiler): add 'comments' option`)}\n` +
        `    ${color.green(`fix(v-model): handle events on blur (close #28)`)}\n\n` +
        color.red(`  See build/COMMIT_CONVENTION.md for more details.\n`) +
        color.red(`  You can also use ${color.cyan(`npm run commit`)} to interactively generate a commit message.\n`)
      )
      process.exit(1)
    }
    
    

    自动化部署

    一般自动化部署是在其他CD机器上去做的,如果没有这个条件,甚至可以在git钩子阶段完成。但是需要注意的一点是,git钩子是没有push阶段的,所以需要通过延时,并且需要一些工具如git-branch-is,来判断当前push的分支。

    这里配置如下:

      "husky": {
        "hooks": {
          "pre-push": "if git-branch-is -q test; then node build/deploy.js; fi"
        }
      }
    

    由于这里的部署脚本调用了网易内部NDP平台的API和秘钥,就不具体展示了。

    工程化

    前面提到了web应用、工具、测试、美化校验等相关点,这里说明下在工程化角度做的一些事情和经验。

    首先,在CI方面,由于我们在commit阶段只是做了简单了代码美化,所以eslint和测试的执行过程都交给了Gitlab的runner。

    在异常监控方面,我们选择了sentry,并使用了其私有化部署工具onpremise

    在多工程维护管理方面,个人认为组件或者模块适合用mono-repo的风格管理,使用lerna这样的工具。而工程规模的才是采用multi-repo风格来管理比较合适。为了提高多个工程分支等操作时的便捷性,团队自研了multi-repo-git,来提高分支操作的效率。从此再也不用同时开好几个控制台面板了。


    总结

    以上就是本次分享的全部经验了,如果各位对其中某些选择觉得不妥,或者对某些自研工具有同场景下更好的开源解决方案,欢迎交流。

    原文链接,讨论地址

    展开全文
  • web前端(VUE技术栈
  • 资源名称:Vue技术栈开发实战 前10课教程内容:Vue作为前端框架的佼佼者,已经受到广大开发者的青睐,因为Vue的简单易用,使得更多后端开发者,或者非开发人员都能上手一二。本课程通过对100多位开发者调查反馈,...
  • 现在开始逐步深入Vue 技术栈,想了想,技术栈专栏的主要内容包括: 1、Vue源码分析 2、手把手教 保姆级 撸代码 3、无惧面试,学以致用,继承创新 4、谈谈前端发展与学习心得 5、手写源码技术栈,附上详细注释 6、从...
  • import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
  • vue技术栈冲鸭

    2020-08-08 11:52:53
    关于vue技术栈 vuex——单页面状态管理 vue-Router ———单页面路由管理 vue ——视图开发框架 axios——网络请求库 Node——— 提供前端开发环境 vuex 在单页面应用中,若使用vuex管理登录状态时,经常会存在...

    关于vue技术栈

    1. vuex
      在单页面应用中,若使用vuex管理登录状态时,经常会存在刷新页面后登录状态消失的问题,这个问题怎么解决呢?
      在单页面应用中,若刷新页面后,登录态是保存不了的。比如我在首页获取到了登录信息,然后存储到vuex中,进入到某个路由中,若当前路由刷新后,vuex中的数据就会被清空,以此也会导致当前路由中依赖登录态的接口都会失效。
    2. vue-router
      在vue中,不能用a标签作为路由跳转,这是因为用Vue做的都是单页应用(当你的项目准备打包时,运行npm run build时,就会生成dist文件夹,这里面只有静态资源和一个index.html页面),所以你写的标签是不起作用的,你必须使用vue-router来进行管理。
     this.$router.push("/");
    
    <router-link to="/">路径名</router-link>
    

    动态路由配置:

      {
            path: "/home/:id",
            component: home
        },
    

    嵌套路由

    {
    path:
    component:
    children:[{
    
    }]
    }
    
    1. axios网络请求
      axios 是一个基于Promise用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

      1. 从浏览器中创建 XMLHttpRequest

      2. 从 node.js 发出 http 请求

      3. 支持Promise api

      4. 拦截请求和响应

      5. 转换请求和响应数据

      6. 取消请求

      7. 自动转换JSON数据

      8. 客户端支持防止CSRF/XSRF

    • 执行get请求 参数要用param接收
    • 执行post请求 参数要用data接收
    • 请求封装执行,异常统一处理。。vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作
      一些请求方法
    axios.request(config)
    axios.get(url [,config])
    axios.delete(url [,config])
    axios.head(url [,config])
    axios.options(url [,config])
    axios.post(url [,data [,config]])
    axios.put(url [,data [,config]])
    axios.patch(url [,data [,config]])
    
    展开全文
  • Vue技术栈高频面试题

    2021-03-16 14:00:38
    Vue技术栈 为什么Vue被称为”渐进框架”? Vue框架本身只关注动态展现数据和与用户交互部分,它本身并不做诸如路由, 状态数据管理, ajax请求等方面, 如果应用功能开发需要, 可以根据需要逐渐引入vue的插件或其它第...
  • vue技术栈与源码分析思维导图 如有需要可联系本人领取可编辑版本
  • Vue 技术栈专栏 文章架构出炉

    千次阅读 2020-03-07 12:10:11
    现在开始逐步深入Vue 技术栈,想了想,技术栈专栏的主要内容包括: 1、Vue源码分析 2、手把手教 保姆级 撸代码 3、无惧面试,学以致用,继承创新 4、谈谈前端发展与学习心得 5、手写源码技术栈,附上详细注释 6、从...
  • Vue前端技术栈

    千次阅读 2019-10-31 17:16:28
    TIP 前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈SpringBoot、MyBatis、Spring Security、Jwt
  • 技术栈vue + vue-router + vuex + webpack + axios +更少+ flex + express + nodejs + mysql + localStorage 自用sql文件下载,包含了本项目接口使用的数据,可直接导入mysql中, , 使用说明 #克隆项目 git clone...
  • Vue作为前端框架的佼佼者,已经受到广大开发者的青睐,因为Vue的简单易用,使得更多后端开发者,或者非开发人员都能上手一二。本课程通过对100多位...课程目录:1.Vue技术栈开发实战-使用vue-cli3创建项目2.Vue技...
  • 本篇文章基于实战下的线上项目,给出基于vue技术栈实现方案。 一、所需工具 npm:包管理工具,前端开发基本都会用到 webpack: 模块打包工具,作用是将js模块或者一些不能被浏览器直接识别的第三方扩展语法(比如less...
  • 一直想着要写一定深度的文章,然后觉得学习Vue是一个好的过程,本文将带你走进Vue的世界,支持国内框架! 如果看完本文还不懂Vue是什么的小伙伴,可以随便打博主!长文预警!
  • <router-link :to="{path: '/abc'}" ></router-link>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,708
精华内容 8,283
关键字:

vue技术栈更加

vue 订阅