Vue
文章平均质量分 72
Vue 项目的点点滴滴
不二博客
世界巨大,我以渺小来爱他。时间悠长,我以短暂来爱他。
展开
-
UniApp 踩坑日记
本文记录了在使用UniApp过程中的一些兼容性的问题和常见的解决方案,希望可以帮助你踩坑~原创 2022-11-04 00:58:03 · 1480 阅读 · 0 评论 -
基于 Vite 2.x 的 Vue 3.x 项目的搭建
Router 4.x 需要搭配 Vue 3.x 进行使用,通过 Vite 进行创建一个 Vue 3.x 的项目就可以上手 Router 4.x。创建 Vue 3.x 项目npm init @vitejs/app my-vue-app --template vue-ts此处创建的是 Vue 3.x + TypeScript 项目 引入 Router 4.xnpm install vue-router@4 --save配置路由在 Vue Cli 中,我们可以直接使用命令进行添加,但是在 Vu原创 2021-03-11 10:38:33 · 384 阅读 · 0 评论 -
记一次SPA项目打包优化的过程
前言在完成spa 项目打包上线后,最让人困扰的一个spa的缺点就是首屏加载事件过长,在之前的解决方案中我们通常是添加一个loading页面来减少用户等待所带来的焦虑感,但是这样的解决方案治标不治本,我们还需要从根本出发。文章目录前言原因分析解决方案移除第三方插件引入在线CDN开始gzip压缩细节优化问题总结原因分析首先我们分析spa项目的解析原理,从浏览器内输入地址后开始下载静态资源,静态资源下载完成后在执行reader渲染元素节点。通过浏览器 F12 中查看文件下载的速度,结果发现 chunk-v原创 2020-12-05 18:21:31 · 624 阅读 · 0 评论 -
Vue 中引入 Less
1. 安装style-resources-loadervue add style-resources-loader2. 安装lessnpm install less less-loader --save-dev3. 全局引入公众样式const path = require('path');module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less',原创 2020-09-11 15:09:27 · 531 阅读 · 3 评论 -
Vue CLI 3+ 多页面项目的搭建
在使用 Vue CLI 搭建项目时,我们需要先检查 Vue CLI 的版本,本篇文章主要记录在 Vue CLI 3 以上的版本中搭建多页面项目。刚接手公司的项目的是Vue CLI2 版本的,所以会在目录中的 build 和 config 文件夹内进行配置,而 Vue CLI3 以上的版本直接通过 vue.config.js 文件中进行配置,这个文件默认不存在,我们需要手动添加。...原创 2020-07-28 18:19:45 · 368 阅读 · 0 评论 -
vue在history模式下刷新页面404
在vue的项目中我们为了美化路由而选择history模式,但是使用了history模式时刷新页面会出现404。import Vue from 'vue'import VueRouter from 'vue-router'import Nav from '../views/Nav.vue'Vue.use(VueRouter)export default new VueRouter({ mode: 'history'})造成这种原因是因为服务端并不能够解析,所以我们需要在服务端进行解原创 2020-06-14 20:18:25 · 1009 阅读 · 2 评论 -
axios 在 vue 中的运用
文章目录什么是 axios?axios 可以做什么?如何使用 axios?下载GET/POST请求参数的传递后台无法获取参数的问题什么是 axios?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios 可以做什么?在 vue 官网推荐使用的是 axios 请求,所以我们可以在 vue 中使用 axios 创建 XML HttpRequests 请求,当然 axios 能做到的肯定不仅仅只是这些,在 axios 官网中介绍它具有八大特新。在浏原创 2020-06-07 18:16:30 · 335 阅读 · 0 评论 -
Vuex 的五大核心概念
文章目录安装核心概念StateGetterMutationAction安装输入命令vue add vuex等候安装完成后会在src文件夹下出现store文件,store文件下的index.js为vuex的主文件。核心概念Vuex是单向数据流的设计模式,其有5大核心概念State、Getter、Mutation、Action和Module,在本篇博客中将记录这5大核心概念的使用和作用。StateState是用来存放数据的,通常将全局数据将保存在这里。// store/index.jsexpor原创 2020-05-28 20:11:34 · 3177 阅读 · 0 评论 -
Vue build 打包和部分vue-config-js配置
vue 打包当我们使用vue写好项目后我们需要将项目进行打包成html项目,使用一下命令可以打包项目。npm run build在当前目录下输入打包命令,等待打包完成后在根目录生成一个dist的文件夹,里面是html页面和css,js,img文件夹。 -- dist -- css -- js -- img -- index.html当然这个html项目我们无法通过双击的形式打开,我们需要创建一个服务才能运行此项目。vue-config-js配置在vue项目里创建vue.con原创 2020-05-28 14:54:41 · 9808 阅读 · 0 评论 -
vue自定义指令模拟v-model指令
前言通常情况下,vue内置的指令并不能够满足我们日常开发的要求,我们则可以根据实际需要进行自定义指令,本篇博客将记录vue自定义指令模拟v-model的过程,有什么错误的地方欢迎批评指正。这里写目录标题前言创建自定义指令钩子函数bind、update和inserted参数 bindings参数 vnode参数 el数据双向绑定指令参数属性限制数据的长度限制数据内容总结创建自定义指令// 全局创建Vue.directive("slice",{ bind(el,bindings,vnode){原创 2020-05-21 20:56:36 · 3153 阅读 · 4 评论 -
Vue Router 路由的安装和使用
文章目录路由(Router)的安装路由(Router)的安装原创 2020-05-20 20:05:21 · 701 阅读 · 0 评论 -
Vue 脚手架的搭建流程
文章目录准备工作安装脚手架快速原型的开发卸载脚手架转义工具运行vue文件创建项目UI界面操作命令行工具创建项目是否使用淘宝镜像选择创建方式准备工作在开始搭建脚手架之前,我们需要检查电脑环境,node的版本不能过低,版本过低可能会出现报错,如果你的node版本在8.9以下,建议你卸载安装8.9以上的版本。安装脚手架打开命令窗口,全局安装脚手架,用于生成项目。npm install -g @vue/cli快速原型的开发可以直接去运行一个独立的vue文件。install -g @vue/cli-s原创 2020-05-19 10:56:25 · 584 阅读 · 0 评论 -
Vue 的指令和数据与事件的绑定
前言最近在学习vue,再此处记录一下基础的知识点,有什么错误的地方欢迎批评指正。Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。正如vue官网所说,vue是一个渐进式框架,那么什么是一个渐进式框架呢?渐进式框架就是既可以当成原创 2020-05-15 21:59:56 · 467 阅读 · 0 评论