vue技术栈（vue技术栈优缺点）

本篇文章给大家谈谈vue技术栈，以及vue技术栈优缺点对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue项目前后端分离下的前端鉴权方案
• 2、vue面试问项目用到什么技术栈时怎么回答
• 3、电商后台管理系统的前端技术栈-----vue
• 4、2020年了，如果现在做一个PC传统网站（多页面、符合SEO），要求要工程化，现在是用什么技术栈？
• 5、前端技术栈有哪些
• 6、windows系统下主流浏览器(包括IE浏览器)对Vue技术栈支持性调查

Vue项目前后端分离下的前端鉴权方案

# Vue项目前后端分离下的前端鉴权方案

### 技术栈

  前端Vue全家桶，后台.net。

### 需求分析

  1. 前端路由鉴权，屏蔽地址栏入侵

  2. 路由数据由后台管理，前端只按固定规则异步加载路由

  3. 权限控制精确到每一个按钮

  4. 自动更新token

  5. 同一个浏览器只能登录一个账号

### 前端方案

 对于需求1、2、3，采用异步加载路由方案

  1. 首先编写vue全局路由守卫

  2. 排除登录路由和无需鉴权路由

  3. 登录后请求拉取用户菜单数据

  4. 在vuex里处理菜单和路由匹配数据

  5. 将在vuex里处理好的路由数据通过`addRoutes`异步推入路由

  ```

    router.beforeEach((to, from, next) = {

      // 判断当前用户是否已拉取权限菜单

      if (store.state.sidebar.userRouter.length === 0) {

        // 无菜单时拉取

        getMenuRouter()

          .then(res = {

            let _menu = res.data.Data.ColumnDataList || [];

            // if (res.data.Data.ColumnDataList.length  0) {

            // 整理菜单路由数据

            store.commit("setMenuRouter", _menu);

            // 推入权限路由列表

            router.addRoutes(store.state.sidebar.userRouter);

            next({...to, replace: true });

            // }

          })

          .catch(err = {

            // console.log(err);

            // Message.error("服务器连接失败");

          });

      } else {

        //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

        if (to.path == "/login") {

          next({

            name: "index"

          });

        } else {

          next();

        }

      }

    } else {

      // 无登录状态时重定向至登录 或可进入无需登录状态路径

      if (to.path == "/login" || to.meta.auth === 0) {

       慎团大 next();

      } else {

        next({

          path: "/login"

        });

      }

    }

  });

  ```

  ##### 注意

   我这里无需鉴权的路由直接写在router文件夹下的index.js，通过路由元信息meta携带指定标识

  ```

    {

      path: "/err-404",

      name: "err404",

      meta: {

         authentication: false

      },

      component: resolve = require(["../views/error/404.vue"], resolve)

    },

  ```

   上面说到路由是根据后台返回菜单数据根据一定规则生成，因此一些不是菜单，又需要登录状态的路由，我写在router文件夹下的router.js里，在上面步骤4里处理后台返回菜单数据时，和处理好的菜单路由数据合并一同通过`addRoutes`推入。 

  这样做会有一定的被地址栏入侵的风险,但是笔者这里大多是不太重要的路由，如果你要求咳咳，可以定一份字典来和后台接口配合精确加载每一个路由。

  ```

  // 加入企业

  {

    path: "/宽竖join-company",

    name: "join-company",

    component: resolve = require([`@/views/index/join-company.vue`], resolve) 

  },

  ```

   在vuex中将分配的菜单数据转化为前端可用的或喊路由数据，我是这样做的：

  管理系统在新增菜单时需要填写一个页面地址字段`Url`,前端得到后台菜单数据后根据`Url`字段来匹配路由加载的文件路径，每个菜单一个文件夹的好处是：你可以在这里拆分js、css和此菜单私有组件等

  ```

      menu.forEach(item = {

            let routerItem = {

              path: item.Url,

              name: item.Id,

              meta: {

                auth: item.Children,

              }, // 路由元信息 定义路由时即可携带的参数，可用来管理每个路由的按钮操作权限

              component: resolve =

                require([`@/views${item.Url}/index.vue`], resolve) // 路由映射真实视图路径

            };

            routerBox.push(routerItem);

        });

  ```

   关于如何精确控制每一个按钮我是这样做的，将按钮编码放在路由元信息里，在当前路由下匹配来控制页面上的按钮是否创建。

  菜单数据返回的都是多级结构，每个菜单下的子集就是当前菜单下的按钮权限码数组，我把每个菜单下的按钮放在此菜单的路由元信息`meta.auth`中。这样作的好处是：按钮权限校验只需匹配每个菜单路由元信息下的数据，这样校验池长度通常不会超过5个。

  ```

  created() {

    this.owner = this.$route.meta.auth.map(item = item.Code);

  }

  methods: {

      matchingOwner(auth) {

        return this.owner.some(item = item === auth);

      }

  }

  ```

   需求4自动更新token，就是简单的时间判断，并在请求头添加字段来通知后台更新token并在头部返回，前端接受到带token的请求就直接更新token

  ```

  // 在axios的请求拦截器中

      let token = getSession(auth_code);

      if (token) config.headers.auth = token;

      if (tokenIsExpire(token)) {

        // 判断是否需要刷新jwt

        config.headers.refreshtoken = true;

      }

  // 在axios的响应拦截器中

    if (res.headers.auth) {

      setSession(auth_code, res.headers.auth);

    }

  ```

   对于需求5的处理比较麻烦，要跨tab页只能通过`cookie`或`local`,笔者这里不允许使用`cookie`因此采用的`localstorage`。通过打开的新页面读取`localstorage`内的`token`数据来同步多个页面的账号信息。`token`使用的`jwt`并前端md5加密。

  这里需要注意一点是页面切换要立即同步账号信息。

   经过需求5改造后的全局路由守卫是这样的：

  ```

function _AUTH_() {

  // 切换窗口时校验账号是否发生变化

  window.addEventListener("visibilitychange", function() {

    let Local_auth = getLocal(auth_code, true);

    let Session_auth = getSession(auth_code);

    if (document.hidden == false  Local_auth  Local_auth != Session_auth) {

      setSession(auth_code, Local_auth, true);

      router.go(0)

    }

  })

  router.beforeEach((to, from, next) = {

      // 判断当前用户是否已拉取权限菜单

      if (store.state.sidebar.userRouter.length === 0) {

        // 无菜单时拉取

        getMenuRouter()

          .then(res = {

            let _menu = res.data.Data.ColumnDataList || [];

            // if (res.data.Data.ColumnDataList.length  0) {

            // 整理菜单路由数据

            store.commit("setMenuRouter", _menu);

            // 推入权限路由列表

            router.addRoutes(store.state.sidebar.userRouter);

            next({...to, replace: true });

            // }

          })

          .catch(err = {

            // console.log(err);

            // Message.error("服务器连接失败");

          });

      } else {

        //当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面

        if (to.path == "/login") {

          next({

            name: "index"

          });

        } else {

          next();

        }

      }

    } else {

      // 无登录状态时重定向至登录 或可进入无需登录状态路径

      if (to.path == "/login" || to.meta.auth === 0) {

        next();

      } else {

        next({

          path: "/login"

        });

      }

    }

  });

}

```

   经过需求5改造后的axios的请求拦截器是这样的，因为ie无法使用`visibilitychange`，并且尝试百度其他属性无效，因此在请求发出前做了粗暴处理：

  ```

  if (ie浏览器) { 

      setLocal('_ie', Math.random())

      let Local_auth = getLocal(auth_code, true);

      let Session_auth = getSession(auth_code);

      if (Local_auth  Local_auth != Session_auth) {

        setSession(auth_code, Local_auth, true);

        router.go(0)

        return false

      }

    }

  ```

 这里有一个小问题需要注意：因为用的`local`因此首次打开浏览器可能会有登录已过期的提示，这里相信大家都能找到适合自己的处理方案

  ###  结语

经过这些简单又好用的处理，一个基本满足需求的前后端分离前端鉴权方案就诞生啦

vue面试问项目用到什么技术栈时怎么回答

常用的有路由、vue 指令、axios(用贺并喊于后端数据请求)、vuebus、时间处理（moment）结合过滤器使用、拦截器、监视、走后门（特殊情况用一下 DOM）、还有一些 ui(element、mint、mui)以及其他一些业务上需要的第三方插件等。

或者还可以回答以下技术。

1、vue 的脚手架可以从自行搭建与 webpack 的原理 。蔽圆

2、vue 项目路禅野由、状态管理、axios、ApI 的封装。

3、vue 服务端渲染 ssr 原理与完整的 SEO 处理点。

4、vue 多页面原理。

5、vue 的响应式原理。

电商后台管理系统的前端技术栈-----vue

现在市面上流行的框架有Jquery，Angular,Vue,React，下面说一下为什么vue胜出了。

1.首先上场的是陪伴了我们N多多多年的jq大哥，他是原生js的封装，帮助我们快速操作Dom，vue和react则是颠覆了操作dom的思想，通过数据的双向绑定更改数据；

2.jq更偏向于js操作样式，而vue和react这是进行数据操作较多一些；

3.在我们的项目中选用了vue，因为公司前端人员都会vue，不再需要学习成本，并且vue适合各种大世清小的项目，react更偏向于尺贺大型的项目；

4.在搭建后台管理系统上，大家都明白的基本上是不需要太多ui图的，我们采用了ui库（iview），这个iview是跟element对比后，做出的选择，因为iview的功能更全，组件ui样式更多一些；

5.项目的搭建没有采用vue-cli，我认为vue-cli是为了模块化，现在我们使用了iview这个ui组件库，就没有必要封装自己的组件了。陵返派所以我们采用了多页面的vue；

6.项目在css上选择less，后期的打包还是使用webpack的，后期会出一篇文章讲解webpack的多页面打包。

总结：如果我的方向哪里有错误的地方，还希望多多指教。

2020年了，如果现在做一个PC传统网站（多页面、符合SEO），要求要工程化，现在是用什么技术栈？

现在如果要做一个PC端传统网站。比较流行前后端分离的形式。那么为什么要用前后端分离的形式呢？

因为在前后端没有分离的时代。我们大多使用mvc进行开发。但是这有一个局限。就在于我的前端和我的后端处于高度耦合。前端的数据以及页面渲染，包括数橡重定向，都是需要从后端进薯旁旁行指定。简单的来说，后端和前端是1对1的模式。这不利于前端形式的拓展。

而目前又随着手机的普遍使用，手机应用包括移动端网站越来越被大众所接受。那么此时我们就想用同一组数据去启者渲染不同的前端界面。很显然，mvc是不能满足这种情况的。于是我们开始用前后端分离的模式进行开发。

那么前端如果是一个PC网站如果要考虑兼容性，那么用的相对比较多的其实还是jquery。但是在目前大多数浏览器都能支持比较新的技术的背景下，其实不需要考虑太多兼容性的问题，那么现在我们大多使用vue进行前端开发。Vue的优势在于通过数据驱动，可以组建化开发，通过mvvm模式进行数据渲染和绑定。当然vue同样支持多页面开发。

在后端我们一般使用WebAPI向前端提供数据。其优势在于很轻量化，而且和前端配合特别友好，效率很高。另一个优势在于数据高并发的需求越来越多。通过前后端分离的模式，我们可以很方便的进行分布式集成化部署，达到后端服务器的负载均衡。

综上所述，2020年我们可以选择前后端分离的模式，使用vue+WebAPI的模式进行PC端页面的开发。

[img]

前端技术栈有哪些

前端技术栈包括：1.vuejs 2.react.js 3.node.js 4.微信公众号 5.前端安全 6.react-native 7.工程化 8.小程序 9.自动化测试等。

基础技术

Html+Css：HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。

javascript：JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。孙如

jQuery：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

node.js：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

npm/yarn/inpm：管理版本工具

gulp.js：Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

前端框架

vue的一些相关技术栈

Vue：Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。

elment-ui：Element，一套为开发者、设计师和产皮掘品经理准备则握启的基于 Vue 2.0 的桌面端组件库。

vant-ui：移动端 Vue 组件库

uni-app：uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

react的一些相关技术栈

React：用于构建用户界面的 JavaScript 库。

React Native：基于 React 的移动端跨平台 UI

Ant Design： React 封装了一套 Ant Design 的组件库。

Zarm React：移动端 React 组件库

Taro：Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。

windows系统下主流浏览器(包括IE浏览器)对Vue技术栈支持性调查

  公司接到了个国企大项目，系统要windows，要求必须兼容xp系统，是否兼容IE8浏览器再商量，我们之前的项目主要是用vue、react技术栈完成的，在项目开始前，我进行了调研工作。

主流浏览器支持安装的最高版本号

主流浏览器对Vue支持的最低版本号

  Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的ECMAScript 5特性枣逗Object.defineProperty实现数据追踪，故不支持IE8及更低版本的浏览器，但它支持所有兼容 ECMAScript 5 的浏览器。

xp系统下能安装的主流浏览器最高版本号

主流浏览器支持canvas、svg的最低版本号

主流浏览器对Vue-UI框架常用的css3属性支持的最低版本号

主流浏览器对于Vue-UI框架的支持度分析

  我对国内最热门的Vue UI框架element-ui着重进行调查，element-ui对IE10及以上的浏览器兼容性好，对IE9浏竖州览器支持不好，原因从上表就可以得知，IE9对css3的支持度不好，大多数css3属性都不支持，而element-ui的一些组件又是基于css3开发的，如el-row、el-col、el-upload组件在IE9上无法使用，el-input、el-table组件在IE9上部分功能也用不了。

总结

  凳纤卖本次总部项目要求支持xp系统，xp系统最高只能安装IE8浏览器，因为vue设计特性的原因，vue只在IE9及以上浏览器才能运行，但IE9对css3支持较差，vue生态对IE10以上的浏览器才展现良好的支持性。所以如果决定使用vue技术栈，就要抛弃IE8，如果需要兼容IE8，就不能用vue，转而考虑可以兼容IE8的react技术栈或兼容性更好的jQuery。

  另一种方法是建议在xp系统下安装另外两个主流浏览器firefox以及chrome，在xp系统下可以安装到chrome v49、firefox v52，更重要的是这两个现代浏览器很早就与标准对接，在它们早期的版本chrome v4、firefox v2就对大部分的css3属性以及所有ES5标准进行支持，在chrome v20、firefox v20几乎对所有的css3属性进行了支持，vue在这些浏览器上可以完美的运行。

  鉴于以上分析，我建议该项目放弃对IE8及以下浏览器的支持，推荐安装firefox以及chrome这两个浏览器，如果需要支持IE9，需要做好UI框架部分Vue组件无法使用的准备。如果总部要求必须支持IE8浏览器或更低的浏览器版本，建议使用jQuery，详细分析，可以看我另一篇关于 《主流前端框架对IE浏览器支持度调查》

关于vue技术栈和vue技术栈优缺点的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。