vue
vue学习内容整理
实习打字猿
这个作者很懒,什么都没留下…
展开
-
axios二次封装-2023
提示功能用的是element-ui,大家可根据实际使用的ui库进行替换。原创 2023-04-05 23:45:31 · 283 阅读 · 1 评论 -
vue3封装element-plus的Table表格
vue3封装element-plus的Table表格原创 2022-08-20 17:56:12 · 2872 阅读 · 0 评论 -
vue3封装element-plus的Form表单
vue3封装element-plus的Form表单原创 2022-08-20 16:53:53 · 3075 阅读 · 5 评论 -
vue3子组件传值给父组件
vue3子组件传值给父组件原创 2022-08-20 16:53:20 · 656 阅读 · 0 评论 -
vue3父组件传值给子组件
vue3父组件传值给子组件原创 2022-08-20 16:52:49 · 1405 阅读 · 0 评论 -
vue安装vue-pdf(预览pdf)
# npmnpm install --save vue-pdf# 页面引用// pdf预览import pdf from "vue-pdf";# 页面使用<template> <div class="main"> <div> <button type="button" @click="changePdfPage(0)">上一页</button> <button type="butto原创 2021-05-04 10:23:30 · 4214 阅读 · 0 评论 -
vue封装element-ui分页
# Pagination.vuesrc/components/Pagination.vue<template> <div class="mt-3"> <el-pagination @size-change="handleSize" @current-change="handleCurrent" :current-page="page2" :page-sizes="sizes" :page-size=原创 2021-05-02 17:45:09 · 265 阅读 · 0 评论 -
vue安装vue-cropper(截图工具)
# npmnpm install vue-cropper# cropper.vue<template> <div style="width: auto; height: 500px;"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :i原创 2021-04-26 19:08:21 · 1638 阅读 · 0 评论 -
vue安装nprogress(进度条动画)
# npmnpm install --save nprogress# 引入index.jssrc/router/index.jsimport Vue from "vue";import VueRouter from "vue-router";import NProgress from "nprogress"; // 引入进度条动画// 进度条动画配置NProgress.configure({ showSpinner: false // 是否显示加载ico});Vue.use原创 2021-04-26 19:06:36 · 1054 阅读 · 2 评论 -
封装 element-ui 的 Form表单
# 新建 Form.vuesrc/components/Form.vue<template> <div> <el-form ref="form" :model="form" :inline="inline" :rules="rules" :label-width="labelWidth" > <el-form-item :label="item.title原创 2021-04-26 19:02:31 · 1706 阅读 · 1 评论 -
vue封装element-ui的表格
# Table.vuesrc/components/Tabel.vue<template> <div> <div class="mb-3" v-if="showAdd"> <el-button type="success" size="medium" @click="handleAdd"> 点击添加 </el-button> </div> <el-tabl原创 2021-04-26 18:43:12 · 543 阅读 · 0 评论 -
vue安装vue-pdf(预览pdf)(2021/03/02)
# npmnpm install --save vue-pdf# 页面引用// pdf预览import pdf from "vue-pdf";# 页面使用<template> <div class="main"> <pdf :src="src"></pdf> </div></template><script>// pdf预览import pdf from "vue-pdf";exp原创 2021-03-02 19:56:06 · 2030 阅读 · 0 评论 -
Vue-cli4安装sass(2021/03/02)
Vue-cli4安装sass注意事项:这里提到的是vue-cli4,你可以能不太敢相信就两行命令,但是我测试没问题。要不要安装 node-sass 我也挺纠结的,因为好像没安装也没什么影响,厉害的大牛希望指点迷津,感谢!(npm install node-sass --save-dev)# npmnpm install sass@1.26.5 --save-devnpm install sass-loader@8.0.2 --save-dev有 cnpm 最好# 页面使用原创 2021-03-02 19:54:34 · 437 阅读 · 1 评论 -
vue实现导出Excel表格
# npm 安装npm install --save xlsx file-saver# 引入 FileSaver 和 XLSXimport FileSaver from 'file-saver'import XLSX from 'xlsx'# 添加 exportExcel() 方法 exportExcel() { /* table关联导出的dom节点 */ let wb = XLSX.utils.table_to_book(document.query原创 2020-10-01 15:29:11 · 249 阅读 · 0 评论 -
vue 全局路由守卫
# 全局路由守卫有两种方式# 第一种是直接在 src => router => index.js 里面修改原文件import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router);export default new Router({ routes: [ { path: '/',原创 2020-07-16 15:44:39 · 160 阅读 · 0 评论 -
vue 安装使用 vuex
# vuex 的核心概念核心概念State访问状态对象Getter计算过滤操作Mutation修改状态Action异步修改状态Module模块组# npm 安装npm install vuex --save# 在 src 文件夹下新建 vuex 文件夹,再在 vuex 文件夹下新建 store.js 文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);原创 2020-07-15 21:42:50 · 147 阅读 · 0 评论 -
vue使用canvas生成登录验证码
# 在 components 文件夹下新建 Verification.vue<template> <canvas id="canvas" @click="showNum" width="138" height="36"></canvas></template><script> export default { name: "Verification", data() { return {原创 2020-06-15 21:15:29 · 727 阅读 · 0 评论 -
vue 使用小结
# vue 首屏加载优化vue 首屏优化加载(一)(懒加载)vue 首屏优化加载(二)(Gzip压缩)vue 首屏优化加载(三)(CND引用)# 只在当前页面设置 body 背景颜色 export default { name: "index", ...... /* * 进入路由之前执行的函数 * */ ...原创 2020-04-18 10:23:21 · 177 阅读 · 0 评论 -
Mock.js 的使用(前端模拟数据)
# npm 安装npm install mockjs# 在 assets 文件夹下新建 js 文件夹,再在js文件夹下新建 mock.js 文件/** 引入mockjs* */import Mock from 'mockjs'/** url = '/api/test/list'* data|20 = 生成20条数据* */Mock.mock('/api/test/li...原创 2020-04-18 10:16:14 · 582 阅读 · 0 评论 -
vue 实现页面返回记住滚动条位置
# 设置需要缓存的页面找到 router 文件夹下的 index.js 进行如下修改:...export default new Router({ routes: [ { path: '/', name: 'index', component: () => import('@/views/index'), meta: { ...原创 2020-04-18 10:08:38 · 754 阅读 · 0 评论 -
开启 axios 请求携带 cookie
# axios 开启请求携带 cookieaxios.defaults.withCredentials = true;axios 默认请求是不携带 cookie 的,但是在前后端分离的情况下,需要利用 cookie 携带需要的 token 进行鉴权,所以我们需要开启 axios 请求携带 cookie 功能...原创 2020-04-18 10:04:19 · 1633 阅读 · 0 评论 -
解决 vue 使用 axios 请求跨域问题
# 找到根目录下 config 文件夹下的 index.js,进行如下修改module.exports = { dev: { ... proxyTable: { '/api': { target: 'http://127.0.0.1:8833/api', // 后端请求接口 changeOrigin: true, // 允许...原创 2020-04-18 10:03:25 · 305 阅读 · 0 评论 -
vue 项目打包部署
# 建议先走vue优化三步曲vue 首屏优化加载(一)(懒加载)vue 首屏优化加载(二)(Gzip压缩)vue 首屏优化加载(三)(CND引用)# 找到根目录下 config 文件夹下的 index.js把 assetsPublicPath: '/' 修改成 assetsPublicPath: './' build: { // Template for index....原创 2020-04-18 10:01:45 · 221 阅读 · 0 评论 -
vue 开发局域网内访问
# 在根目录找到 package.json在scripts内的dev后面加上 --host 0.0.0.0 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", },# 重启项目,同一个局域网内手机访问h...原创 2020-04-18 09:59:47 · 241 阅读 · 0 评论 -
mavon-editor编辑器页面瞄点
# 获取页面所有的a标签使用mavon-editor编辑器输出的html中,标题<h3><a id="npm__0"></a>npm 安装</h3>中会包含一个的a标签,a标签设置了唯一的id,这给我们进行网页瞄点提供了一个很好的思路,所以我们需要去获取a标签中的id,再渲染到页面上即可; data() { return { ...原创 2020-04-18 09:58:45 · 1805 阅读 · 0 评论 -
vue 中使用 markdown 编辑器(mavon-editor)
# npm 安装npm install mavon-editor --save# 新建 mavonEditro.vue<template> <div> <mavon-editor v-model="content" @change="change" style="min-height: 600px" ...原创 2020-04-18 09:56:36 · 837 阅读 · 0 评论 -
vue 安装使用 vant
# npm 安装npm i vant -S# main 引入 Vant在 main.js 中写入以下内容:import Vue from 'vue'import App from './App'import router from './router'import Vant from 'vant';import 'vant/lib/index.css';Vue.use(...原创 2020-04-18 09:55:47 · 632 阅读 · 0 评论 -
axios 二次封装
# 在根目录 index.html 使用 cnd 节点导入 axios<!-- axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>完整代码:<!DOCTYPE html><html> <head> <...原创 2020-04-18 09:54:55 · 240 阅读 · 0 评论 -
vue 新建项目
# 以管理员身份运行CMD!# 新建 vue 命令vue init webpack ”项目名称“属性含义Project name (项目名称)项目名称(项目名称),直接回车即可Project description (A Vue.js project)项目描述(vue.js项目),直接回车即可Author作者,输入作者回车即可Vue bui...原创 2020-04-18 09:53:43 · 132 阅读 · 0 评论 -
vue 公共方法抽离
# 在 assets 文件夹下新建 js 文件夹,再在js文件夹下新建 cookie.js 文件/** cookie的封装* 封装setCookie()、getCookie()、delCookie() 方法* */export default { /* * 存储cookie * */ setCookie(cname,cvalue){ document.co...原创 2020-03-02 12:22:58 · 499 阅读 · 0 评论 -
Nuxt 目录结构介绍
# Nuxt 目录结构属性含义.nuxtNuxt自动生成,临时的用于编辑的文件,buildassets用于组织未编译的静态资源如LESS、SASS或JavaScriptcomponents用于自己编写的Vue组件,比如波动组件、日历组件、分页组件layouts布局目录,用于组织应用的布局组件,不可更改middleware用于存放中间件p...原创 2020-03-02 12:22:15 · 400 阅读 · 0 评论 -
Nuxt 新建项目
# 新建项目:npx create-nuxt-app <项目名>属性含义Project name (项目名)确认项目名,直接回车即可Project description (My peachy Nuxt.js project)项目描述,直接回车即可Author name (chenbz)确认或输入作者名,然后回车即可Choose th...原创 2020-03-02 12:21:30 · 1083 阅读 · 0 评论 -
vue 首屏优化体验(初始化动画)
# 在 static 文件夹下新建 css 文件夹,再在css文件夹下新建 loading.css 文件.container { position: relative; text-align: center; width: 100px;}.item { display: inline-block; height: 15px; width: 15px; borde...原创 2020-03-02 12:20:43 · 880 阅读 · 1 评论 -
vue 首屏优化加载(三)(CND引用)
# 在根目录 index.html 使用 cnd 节点导入因为Element依赖Vue,vue.js需要在element-ui之前引入,所以vue.js也要改为cnd的引入方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport...原创 2020-03-02 12:19:42 · 334 阅读 · 0 评论 -
vue 首屏优化加载(二)(Gzip压缩)
# 安装compression-webpack-plugin开发依赖插件npm install --save-dev compression-webpack-plugin# 进入根目录下的config/index.js,把productionSourceMap: 改为false,productionGzip 改为trueproductionSourceMap: false,// ht...原创 2020-03-02 12:19:02 · 184 阅读 · 0 评论 -
vue 首屏优化加载(一)(懒加载)
# 路由懒加载(按需加载)已经懒加载的路由:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router);export default new Router({ routes: [ { path: '/', name: 'index', component: ()...原创 2020-03-02 12:18:12 · 281 阅读 · 0 评论 -
vue 卸载安装的插件
# 安装插件npm install --save [插件名]# 卸载插件npm uninstall [插件名]原创 2020-03-02 12:17:19 · 3774 阅读 · 0 评论 -
vue 整合使用 Vue-Quill-Editor富文本编辑器
# npm 安装1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill(Vue-Quill-Editor需要依赖)npm install quill --save# 新建一个 quill.vue<template> <div><quill-editor v-model=...原创 2020-02-29 11:46:43 · 477 阅读 · 0 评论 -
vue 使用 axios 教程
# npm 安装1、安装 axiosnpm install axios --saveaxios不能直接使用Vue.use()方法,需要导入专门的一个包来整合使用axios,使用npm安装‘vue-axios’包并将其添加进项目依赖2、安装 vue-axiosnpm install vue-axios --save3、安装 qsnpm install qsqs 的作用...原创 2020-02-29 11:44:27 · 303 阅读 · 0 评论 -
vue 安装使用 Element-ui
# npm 安装npm i element-ui -S# 引入 Element在 main.js 中写入以下内容:import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui';import 'element-ui/lib/...原创 2020-02-29 11:39:57 · 104 阅读 · 0 评论