vue

Composition API是 vue-next 中的逻辑复用解决方案，它是一组基于函数式编程的组合式 API。与之前的逻辑复用方案mixin相比，带来了更友好的类型检查，更方便的测试等优点。 Composition API的详细用法和 API 可以参考官方文档，这里我们做一个简单的初步的上手体验。 安装 Composition API被单独抽离为一个库，让我们可以在 vue2.x 中体验该特性。 npm install @vue/composition-api # or yarn add @vue/composition-api 在Vue中注册@vue/composition-api // main.js import Vue from 'vue' import CompositionApi from '@vue/composition-api' Vue.use(CompositionApi) 得益于 vue 的插件机制，通过一行简单的代码，我们就给项目添加了Composition API特性。 开始 Composition API给 vue 组件增加了一个名为setup的生命周期函数，它要早于befororeCreate执行，在 vue-next 中是最早执行的生命周期钩子。 注意: 和befororeCreate一样，setup实例还没创建，因此无法使用this。 <template> <!-- 自动展开 --> <div>{{message}}<div> <!-- 也可以手动取值 --> <div>{{message.value}}</div> </template> <script> import { ref } from '@vue/composition-api' export default { setup () { const message = ref('hello vue') return { message, setMessage: (msg) => initialMessage....

在前端工程打包部署过程中，经常会有同学遇到图片等静态资源 404 的问题，这些问题都是于打包后资源路径不正确导致的。本文就从基础开始，讲解如何分析并解决此类问题。 绝对路径于相对路径 首先先搞清楚绝对路径和相对路径的区别。绝对定位就是从根目录开始，二相对路径是以当前路径为参考，从标记上来看，绝对路径是以/开头的路径，而相对路径是以./或者文件(文件夹)名称开头的路径。 web 中的路径 前面简单的讲了绝对路径和相对路径的定义和区别，下面，开始重点讲在 web 中的资源路径。 在浏览器中访问 web 有两种方式，一种是直接在浏览器中打开.html文件，另一种是通过一个 IP 或域名访问部署在静态资源服务器（web 服务器）中的网页。分别来分析两种情况。 直接打开.html文件 在文件系统中，绝对路径以根目录或盘符开始，比如：/Users/Johnson/Document（Linux/Unix）和C:\Users\Johnson\Document（windows）。如果我们直接从浏览器加载index.html页面，那么浏览器中的地址是该文件在系统中的绝对路径。 在 unix 或类 unix（如 macOS）系统中，以file://开头，在 windows 中以盘符开头。我们先看一下这个图片的路径 可以看到，写的是相对路径，浏览器从文件系统中也通过相对路径加载图片。然后，换成绝对路径试试。 图片也能正常加载，但是我们平时在web开发过程中通过绝对路径应用资源并没有写文件在磁盘中的真实路径，而是像这样写 然后再打开，会发现图片无法显示了，从调试工具中可以看到，浏览器直接从系统根目录查找文件 因此，如果我们的 web 应用需要打包成桌面应用/移动 app，那么一般情况只能使用以./开头的相对路径，除非打包的应用中集成了静态资源服务。 从 web 服务器访问 Web 服务器会给每一个 web 应用的目录分配一个域，我们可以直接通过 IP 地址或者域名来访问。当在浏览器中访问该 web 应用时，会将绝对路径的根目录代理到项目所在目录。看一个 vue 实例：将项目打包后，使用http-server为 dist 目录开启一个代理 同样适用绝对路径，通过网络调试器看到资源从http://localhost:8081/images/logo.png请求来的，服务器将http://localhost:8081/部分映射到了/Users/liyongsheng/Documents/path-problem/dist路径下，这样就能正确获取到绝对路径标记的资源。同样的，我们也可以使用以./开头的相对路径。 webpack 打包静态资源路径 在webpack打包过程中，使用相应的插件可以将静态资源打包到模块化的代码中。这里重点讲在标签中的src资源。以vue项目为例，如果src写的是以/开头的绝对路径，则不做任何处理，如果是以.,~,@开头，则会被webpack当作模块打包，具体参考vue-cli官方文档。 因此，如果不希望静态资源被打包到模块化代码中，我们可以使用绝对路径来引入资源，如下图所示： 也可以使用相对路径，但是使用相对路径会被webpack打包，编译的时候就会报错 要避免这个问题，可以使用数据绑定 publicPath pablicPath是 webpack 的一个配置项，用于指定资源根目录，默认为/。大多数图片 404 问题都是因为网站部署到二级目录下，比如域名为www.a.com，那么如果网站部署到www.a.com/b/下面，就会导致图片 404 问题，调试可以发现浏览器是从www.a.com下面请求资源，但是实际上应该是www.a.com/b/下面亲求，一般只用修改publicPath为/b/就可以解决，这样浏览器会从www.a.com/b/下面去请求资源。 打包 app 的情况 将 web 项目打包为 app 的时候，一般都是通过 webview 直接从文件系统中加载页面，这里由于没有 web 服务器，绝对路径就会被解析到系统根目录下。因此publicPath需要设置为相对路径publicPath: ''或publicPath: '....

在 SPA（单页面应用）中，前端需要根据用户的权限来控制用户菜单以及路由表，vue-router提供了几个路由生命周期钩子，叫做路由守卫，我们可以利用路由守卫在路由以及路由元信息进行权限控制，同时搭配 vuex 将会更美味，文末有完整示例地址。 登录权限 登录验证是最常见的一种路由权限验证，使用vuex + 路由守卫可以实现比较清晰流畅的鉴权流，能轻松应对页面刷新、清除缓存等场景。 路由元信息 vue-router在构建路由时提供了元信息meta配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。 // router.js // 路由表元信息 ;[ { path: '', redirect: '/home', }, { path: '/home', meta: { title: 'Home', icon: 'home', }, }, { path: '/userCenter', meta: { title: '个人中心', requireAuth: true, // 在需要登录的路由的meta中添加响应的权限标识 }, }, ] // 在守卫中访问元信息 function gaurd(to, from, next) { // to.matched.some(record => record.meta.requireAuth) // 可在此处 } vuex 一般的，用户登录后会在本地持久化存储用户的认证信息，本文以JWT的token为例。将用户的 token 持久化到 localStorage 里，而用户信息则存在内存(store)中。这样可以在 vuex 中存储一个标记用户登录状态的属性auth，方便用语权限控制。 // store.js { state: { token: window....