Vue
YoloAva
这个作者很懒,什么都没留下…
展开
-
node.js和npm的安装与环境配置 + Vue创建项目
node.js:node.js和npm的安装与环境配置(2021最新版)_小绵杨-CSDN博客_npm安装Vue-cli 3.0新版本 脚手架--全局安装 npm install -g @vue/cli (sudo npm install -g @vue/cli)--卸载 npm uninstall @vue/cli -g vue 4.X 创建项目:去文件夹下 vue create 项目名称?please pick a preset: mannually select fe原创 2022-02-08 22:05:59 · 663 阅读 · 0 评论 -
VScode 插件、自定义配置快捷生成vue模板代码
1、 Chinese Language :中文汉化包,设置后会提示重启 2、 Bracket Pair Colorizer :设置括号颜色,方便嵌套的时候区分结构 3、 Auto rename Tag :标签补全 5、 HTML CSS support:在编写样式表的时候,自动补全功能大大缩减了编写时间 6、 JavaScript (ES6) code snippets:提供ES6的语法支持 8、 Live server :右键可以快速在浏览器中打开我们的...原创 2022-02-08 21:50:19 · 982 阅读 · 0 评论 -
Vue项目 消息页面 未读变已读 、传数组、处理时间的函数、页面刷新
MessageItem.vue 子组件<template> <div class="my-course-content"> <div style="width: 980px" v-if="messList && messList.length > 0"> <div class="course-main" style="width: 980px"> <div cl...原创 2022-02-07 19:09:55 · 2466 阅读 · 1 评论 -
Vue项目 我的课程页面—渲染课程列表 (父传子、el-tabs、封装分页器)
效果:utils > scroll-to.js (目的:重新请求数据时,自动滑动到顶部)Math.easeInOutQuad = function(t, b, c, d) { t /= d / 2 if (t < 1) { return c / 2 * t * t + b } t-- return -c / 2 * (t * (t - 2) - 1) + b}// requestAnimationFrame for Smart Animat..原创 2022-02-07 17:24:21 · 999 阅读 · 0 评论 -
Vue项目 用户登录状态持久存储 (即使刷新)
本地存储 isLogin 登录状态 并保存到vuexHeader.vue<div class="content-login-success" v-if="isLogin"> <div style="cursor: pointer">我的课程</div> <div @mouseenter="isUserInfo = true"> <!-- 用户头像 -->原创 2022-01-31 18:46:22 · 1752 阅读 · 0 评论 -
Vue项目 提交登录表单2.0 Loading动画 + aes.js + token + vuex存个人信息 + 时间戳(结束时间-当前时间)
<el-form :model="phoneForm" ref="phoneFormRef" class="demo-ruleForm" > <el-form-item prop="username" class="captcha"> <el-input ..原创 2022-01-31 10:49:45 · 773 阅读 · 0 评论 -
Vue项目 提交登录表单1.0 正则 + token
<template> <div class="login_container"> <div class="login_box"> <!-- 头像区域 --> <div class="avatar_box"> <img src="@/assets/lanmao.png" alt="" /> </div> <!-- 登录表单区域 需要去plugi.原创 2022-01-31 10:08:58 · 544 阅读 · 0 评论 -
Vue项目 会员页 字符串转对象
后端数据为字符串:[{"label":"每天免费学课程","icon":1},{"label":"W3C标准技术","icon":1},{"label":"快捷易懂的学习方式","icon":1},{"label":"在线实例测试工具","icon":1},{"label":"自律的学习模式","icon":1}]方法:item.interests = JSON.parse(item.interests);Member.vue<!--体验会员--> &.原创 2022-01-30 11:47:37 · 670 阅读 · 0 评论 -
Vue项目 课程筛选 方向、分类、难度、最新、最热、价格升降
CourseMain.vue<template> <div class="coursemain"> <div class="course-main"> <section class="search-container"> <div class="search-item"> <div class="title-name">课程方向:</div> ...原创 2022-01-29 20:58:03 · 621 阅读 · 0 评论 -
Vue项目 播放器插件 vue-video-player
vue-video-player - npm1.安装npm install vue-video-player --save2.main.js 引入>import VueVideoPlayer from 'vue-video-player'window.videojs = VueVideoPlayer.videojsrequire('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css原创 2022-01-29 10:51:47 · 586 阅读 · 0 评论 -
Vue项目 课程列表页 跳转 课程详情页 跳转 视频播放页
课程列表页Coursemain.vue 跳转至 课程详情页 <!-- 课程列表 --> <div class="container-body" v-if="courseArr && courseArr.length > 0"> <div class="newCourseContent"> <ul class="courseUl"> <li原创 2022-01-28 21:55:45 · 754 阅读 · 0 评论 -
Vue项目 watch监听路由地址
Header.vue<template> <!-- 首页头部组件 --> <div class="header"> <div class="index-header"> <div class="header-content"> <!-- 头部logo --> <div class="content-logo"> <img src="/原创 2022-01-28 17:53:59 · 589 阅读 · 0 评论 -
Vue项目 $set forEach+SwitchCase 免费/会员/收费课程 接口
components>index>NavSwiper.vue<template> <div class="navswiper"> <div class="navSwiperContent"> <div class="navigation"> <ul> <li v-for="(item, index) in categorys"原创 2022-01-27 21:58:24 · 407 阅读 · 0 评论 -
Vue项目 vue.config.js配置 & request.js一次封装axios
vue.config,jsmodule.exports = { publicPath: './', lintOnSave: false,//每次保存代码的时候是否启动eslint devServer: { host: '127.0.0.1', port: 8080, open: true,//项目启动时自动打开浏览器 proxy: { '/api': {// '/api'时代理的标识,告诉node url前面的/api是使用代理的原创 2022-01-26 21:39:28 · 741 阅读 · 0 评论 -
Vue项目 App.vue引用公共样式 以及一些行内样式写法
App.vue<template> <div id="app"> <!-- <img src="./assets/logo.png"> --> <!-- <h1>{{ msg }}</h1> <p> <router-link to="/">Home</router-link> | <router-link to="/about"&g原创 2022-01-26 21:42:47 · 1237 阅读 · 0 评论 -
Vue 组件传值 父传子、子传父、兄弟传值
一.父组件 ==》子组件:父组件请求一次数据,把子组件需要的数据分别传给他们 1. 父组件:标签中传递数据 <user-detail :myName="name" /> export default { components: { UserDetail } ...... } 2. 子组件:使用props(可以是数组也可以是对象)接收即可。可以传多个属性。 ...原创 2022-01-08 15:22:17 · 417 阅读 · 0 评论 -
Vue + echarts 实现文章类型数量统计
npm i echarts@4.9.0 --saveHandbook - Apache EChartsmain.js引入import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'import router from './router/index'import echarts from原创 2022-01-05 20:07:22 · 415 阅读 · 0 评论 -
Vue + wangeditor 富文本提交图片文章
<!-- npm wangeditor --save --><template> <div> <div style="padding: 20px"> <el-button type="primary" @click="upText">提交</el-button> </div> {{ accountInfo.profile.name }} <div class="tit.原创 2022-01-04 17:16:37 · 401 阅读 · 0 评论 -
Vue + Js 处理时间格式
原本的时间格式如:Wed Jan 19 2022 00:00:00 GMT+0800 (中国标准时间)改为:2022-1-19代码:addUser(){ this.form.birthday = this.setTime(this.form.birthday);//调用 console.log(this.form.birthday);//Wed Jan 19 2022 00:00:00 GMT+0800 (中国标准时间) =》 2022...原创 2022-01-03 16:06:53 · 668 阅读 · 0 评论 -
Vue 父传子 不能在子中直接改变父的值 只能通过接收父的方法在父中改变值
父——info.vue:<!-- --><template> <div class="info"> <p>账户信息:{{ accountInfo.profile.account }}</p> <p> 修改密码: <span @click="typeBoolean = true" style="color: deepskyblue"> 修改密码原创 2021-12-31 15:38:29 · 499 阅读 · 0 评论 -
Vuex + modules 管理导航菜单和帐号信息
请求到菜单数据后,存到vuex中,方便后期使用。home.vue组件部分代码:<!-- --><template> <div> <el-container> <!-- 导航 --> <el-aside style="width: auto"> <el-menu default-active="1-4-1" class="el-原创 2021-12-31 10:40:42 · 411 阅读 · 0 评论 -
Vuex state,getters,mutations,actions用法
首先在main.js中引入vuex:import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'import router from './router/index'import store from './store/index'//全局使用Vue.use(ElementUI);new原创 2021-12-30 14:36:13 · 561 阅读 · 0 评论 -
Vue + 项目优化 路由懒加载(含路由守卫代码)
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。1 安装 @babel/plugin-syntax-dynamic-import 包2 在 babel.config.js 配置文件中声明该插件。//这是项目发布阶段需要用到的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'prod...原创 2021-12-27 19:02:39 · 232 阅读 · 0 评论 -
Vue + 项目优化 通过externals加载外部CDN资源
问题:生成打包报告时,终端vue ui指令,通过可视化UI面板查看报告,在可视化的UI面板中,通过控制台和分析面板,看到项目中所存在的问题echarts,element-ui,quill等依赖项所占体积太大 控制台中显示,第三方依赖项占项目总资源的90%体积;速度统计面板,不同网络状态下,项目打开所消耗的时间都比较长;chunk-vendor.js文件占了1.9MB ,需要缩小这个文件的大小原因:默认情况下,通过import语法导入的第三方依赖包,最终会被打包...原创 2021-12-27 18:28:36 · 495 阅读 · 0 评论 -
Vue + 项目优化 为开发模式与生产模式指定不同的打包入口
默认情况下,vue项目的开发模式和生产模式共用一个打包的入口文件——src/main.js,为了将项目的开发过程与生产过程分离,我们可以分为两种模式,各自指定打包的入口文件:main-dev.js和main-prod.js,将src/main.js重命名为main-dev.js,并复制一份main-prod.js 在vue.config.js中通过chainWebpack节点自定义打包入口module.exports = { lintOnSave: false, chainWebpack: c原创 2021-12-27 18:02:36 · 646 阅读 · 0 评论 -
Vue + 项目优化 build阶段使用babel插件将console.log相关代码移除
官网:babel-plugin-transform-remove-console - npm1. npm install babel-plugin-transform-remove-console --save-dev2. 根目录下babel.config.js >module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component',原创 2021-12-27 17:04:39 · 344 阅读 · 0 评论 -
Vue + element-ui + echarts
<!-- --><template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>.原创 2021-12-27 16:39:02 · 554 阅读 · 0 评论 -
Vue + element-ui 实现table表格分页
<!-- --><template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>.原创 2021-12-27 12:52:19 · 306 阅读 · 0 评论 -
JS Vue项目中字符串转数组、数组转字符串
1.字符串转数组const res = await api.getManyParams(this.cateId, 'many')if (res.meta.status !== 200) { return this.$message.error('获取动态参数列表失败')}res.data.forEach( item => {//将后端每一项的字符串用空格分开变成数组 item.attr_vals = item.attr_vals.length === 0 ? [] : it原创 2021-12-26 18:34:57 · 4357 阅读 · 0 评论 -
Vue + element-ui 上传、移除、预览图片
注意:每次上传图片,都需要为上传的UI组件手动指定headers请求头,同时在请求头对象中绑定authorization字段,因为上传组件并没有调用axios,所以我们需要手动指定headers去获取tokenadd.vue ><!-- --><template> <div> <!-- 面包屑导航区域 --> <!-- 卡片视图区域 --> <el-card> <!--.原创 2021-12-26 17:58:08 · 1095 阅读 · 0 评论 -
Vue 定义一个格式化时间的过滤器 在element-ui中使用
main.js >import Vue from 'vue'import App from './App.vue'import router from './router'import './plugins/element.js'//导入全局样式表import './assets/css/global.css'//导入字体图标import './assets/fonts/iconfont.css'import TreeTable from 'vue-table-with-tre.原创 2021-12-26 12:12:05 · 309 阅读 · 0 评论 -
Vue + Element-UI 后台管理系统两层for循环渲染左侧菜单
Home.vue<!-- --><template> <el-container class="home-container"> <!-- 头部 --> <el-header> <div> <img src="@/assets/lanmao.png" alt="" /> <span>某系统</span> </d原创 2021-12-21 18:14:51 · 758 阅读 · 0 评论 -
JS 数组中的forEach、map、filter、find四个方法的使用方法和案例总结
1. forEach() :主要用于循环遍历数组,forEach不会返回新数组,允许对原数组进行修改。2. map() : 主要用于循环遍历数组,也可在内使用条件语句,map会返回一个新数组,不会改变原来的数组。3.filter() :主要用于筛选过滤数组,返回符合筛选条件的数据,filter会返回一个新数组,不会改变原数组。4. find() :主要用于查找数组的数据,只要查找到第一项符合条件的数据,直接返回,若没有找到符合条件的数据返回undefined。find会返回一个新数组,不会改变.原创 2021-11-28 18:13:30 · 2440 阅读 · 0 评论 -
Vue Vuex持久化存储用户信息 退出登录
使用场景:通过组件userLogin.vue读取到后端的用户信息,使用mapMutations存储到vuex中,随后通过my.vue页面使用mapState展示用户信息相关数据。首先,vuex采用modules模块化开发,便于维护:// src > store > index.js >import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);import user from './modules/user原创 2021-11-21 21:11:00 · 1607 阅读 · 1 评论 -
Vue 注册功能
<div class="login container"> <Header> <span>注册</span> </Header> <section> <div class="login-tel"> <input type="text" v-model="userTel" placeholder..原创 2021-11-21 21:13:06 · 353 阅读 · 0 评论 -
Vue 获取短信验证 倒计时功能
<div class="login-tel"> <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*" /> </div> <div class="login-code"> <input type="text".原创 2021-11-21 21:13:37 · 208 阅读 · 0 评论 -
Vue + Node 手机号、密码登录 后端逻辑
//***Server > db > userSql.js >//验证数据库中的用户相关内容const User = { //查询用户手机号 queryUserTel(option) { return 'select * from user where tel = ' + option.userTel + ''; }, queryUserPwd(option) { return 'select * from user w.原创 2021-11-21 21:12:42 · 127 阅读 · 0 评论 -
Vue + Node 手机号、密码登录 前端逻辑
<div class="login-tel"> <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*" /> </div> <div class="login-tel"> <input type="text" .原创 2021-11-21 21:12:31 · 383 阅读 · 0 评论 -
Vue keep-alive的使用方法
1. keep-alive是什么 vue系统自带的一个组件,功能:是来缓存组件的。===》提升性能2. 使用场景 缓存组件,提升项目的性能。具体实现比如:首页进入到详情页,如果用户在首页每次点击都是相同的,那么详情页就没必再请求了,直接缓存起来,渲染在页面就可以了。当然如果点击的不是同一个,那么就重新请求。3. 使用方法 在app.vue中,用keep-alive将router-view包裹。 第一次进入详情页,会执行created,调用getData这个请求详情数据的方原创 2021-11-21 21:11:40 · 433 阅读 · 0 评论 -
Vue 跳转页面路由传值 显式 + 隐式
显式://***上一页的Like.vue><ul> <li v-for="(item, index) in likeList" :key="index" @click="goDetail(item.id)" > <h2> <img v-lazy="item.imgUrl" alt="" /> </h2>原创 2021-11-21 21:11:53 · 1080 阅读 · 0 评论