Vue.js
请叫我算术嘉
快手HDFS
展开
-
Vue 封装 Axios 插件
新建一个request.jsimport axios from 'axios' //引入 axiosimport baseUrl from '../api/baseUrl'// 创建 axios 实例const service = axios.create({ baseURL: baseUrl, // api 的 base_url timeout: 15000, // 请求超时时间});// 添加请求拦截器service.interceptors.req原创 2022-02-27 12:57:04 · 2839 阅读 · 0 评论 -
Django个人博客搭建教程---使用Element-UI实现文件上传
Element-UI<el-upload class="upload-demo" drag="" action="http://127.0.0.1:8000/api/upload/resumes/" multiple="" :limit="3" :show-file-list="false" :on-exceed="handleExceed" :onsuccess="uploadSuccess" :file-list="fileList"> <i class="el-icon-up原创 2021-05-22 21:56:08 · 20648 阅读 · 0 评论 -
Vue.js前端性能优化
动态路由加载const router = new Router({ mode: 'history', //去掉url中的# routes: [ { path: '/index', name: 'Index', component: () => import('@/components/Index') }, { path: '/hello', name: 'HelloWorld', compo原创 2021-02-15 01:20:12 · 19842 阅读 · 0 评论 -
Vue.js中使用nprogress进度条
安装npm install --save nprogress简单使用router目录下,index.js引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'配置NProgress.configure({ easing: 'ease', speed: 500, // 递增进度条的速度 showSpinner: false, // 是否显示加载ico trickl原创 2021-02-13 00:27:02 · 20232 阅读 · 2 评论 -
Element-UI修改样式不影响其他组件
需求描述需要修改某一个页面(组件)的弹框,又不能影响其他组件的弹框样式然而不能在<style scoped></style>中直接修改,因为不生效也不能在<style></style>中修改,因为会影响其他组件方法<div class="wrapper"> <el-dialog class="pop_dialog" title="" :visible.sync="wuhan" width="35%" center s原创 2021-02-09 14:41:26 · 1281 阅读 · 0 评论 -
Vue.js结合Element-UI实现markdown目录
引入markednpm install marked -S父子组件传值以及函数调用我的父组件是文章详情页,子组件是左侧菜单栏父组件代码<template> <el-container> <title></title> <Markdown :psMsg=navList @callFather="pageJump"></Markdown> <el-main> <vue-原创 2021-01-24 22:07:31 · 2068 阅读 · 0 评论 -
Vue项目部署到Apache2解决404问题
vue项目打包打包的文件放在/var/www目录下此时包括一个index.html和一堆静态文件修改/etc/apache2下apache2.conf将AllowOverride None改为AllowOverride All<Directory /> Options FollowSymLinks AllowOverride All Require all denied</Directory><Directory /usr/share&g.原创 2021-01-23 09:29:29 · 1179 阅读 · 1 评论 -
Vue.js结合Element-UI实现标题动态赋值以及国际化
国际化动态标题赋值添加标题<template> <el-container> <title>{{$t('common.category')}}</title> </el-container></template>首先监听语言改变watch: { '$i18n.locale' (newVal, oldVal) { document.title = this.$t('common原创 2021-01-21 18:07:11 · 1058 阅读 · 0 评论 -
Vue.js结合Element-UI实现分页跳转页面详情返回记住当前点击第几页
列表页mountedmounted: function() { this.showBlogs(); this.getLastPage()},methodsgetLastPage() { //当从详情页返回的时候,先获取详情页中存下来的detall标识,在列表页中,把获取到的分页页码重新赋值赋值,用以返回前的页面,保持不变 if (sessionStorage.getItem('detail')) { // console.log(Num原创 2021-01-20 13:11:37 · 3269 阅读 · 5 评论 -
Vue.js+Element-UI走马灯图片自适应实践
核心代码<el-carousel :height="bannerHeight+'px'" > <el-carousel-item v-for="item in imgUrls" :key="item"> <img ref="bannerHeight" @load="imgLoad" style="width: 100%" :src="item" >原创 2021-01-01 12:45:41 · 1263 阅读 · 4 评论 -
Vue.js+Element-UI国际化实践
1、 下载element-ui和vue-i18n:npm i element-ui --save npm i vue-i18n –save2、 创建languages文件夹路径为/src/assets/languages,新建en.js和zh.jsconst en = { "common": { "home": "Home", "archive": "Archive", "category": "Category", "search": "..原创 2020-12-29 16:18:35 · 534 阅读 · 0 评论 -
Vue.js结合Element-UI实现导航菜单组件复用
定义顶部导航菜单CloudTabHead.vue注意,这里不要用<el-header>或者<el-container>之类的标签去包装,不然你在用的时候会出现错乱,还有可能导致Component template should contain exactly one root element的错误(这是因为一个template模板只能有一个根<div>,可以认为也不能出现两个根<el-container>。<template>原创 2020-12-19 10:02:18 · 1328 阅读 · 3 评论 -
Vue.js结合Element-UI递归实现多级导航菜单动态加载
主要参考https://blog.csdn.net/gnosed/article/details/105178518Menu.Vue在需要加载导航的地方调用该组件:<el-menu > <navigation-item v-for="(menu,i) in List" :key="i" :item="menu"/></el-menu>完整代码:<template> <div> <el-aside.原创 2020-12-10 20:00:41 · 1540 阅读 · 1 评论 -
Vue.js+HighCharts动态请求展示时序数据
<template> <el-container> <el-header> <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="handleSelect"> <el-menu-item index="1"><router-link :to="{path: '/yun/index.原创 2020-09-23 18:29:12 · 2146 阅读 · 0 评论 -
【Vue.js】用vue组件完成官网实时markdown示例
https://cn.vuejs.org/v2/examples/官网这个示例是用普通js方式的引入的vue,直接在html文件上写的,不够vue安装几个包npm i lodash -Snpm i marked -S路由export default new Router({ routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld原创 2020-05-24 19:26:09 · 4303 阅读 · 0 评论 -
【Vue.js】生命周期created和mounted的区别
什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。生命周期 是否获取dom节点 是否可以获取data 是否获取methods beforeCreate 否 否 否 create...原创 2020-04-04 14:46:49 · 3588 阅读 · 0 评论 -
Vue.js入门(七)---数据时间格式化
安装momentnpm install moment --save导入momentv在你需要的页面<script>标签下添加import moment from 'moment';写一个过滤器filters: { /* 时间格式自定义 只需把字符串里面的改成自己所需的格式 */ formatDate:function(date) { ...原创 2020-03-07 21:28:40 · 4621 阅读 · 0 评论 -
Vue.js入门(六)---使用computed进行v-for倒序
<div class="grid-content bg-puprple-light" v-for="(value, key, index) in reverseblogList.slice((currentPage-1)*pageSize,currentPage*pageSize)"> <el-row type="flex" class="row-bg" justify...原创 2020-03-07 19:57:28 · 5712 阅读 · 0 评论 -
Django中使用Vue.js语法冲突解决方案
其实用vue的话最好是搭建脚手架,不推荐用h5的方式写vue但是初学者可以用html快速领略到vue的魅力如何在Django框架中使用带vue.js的html页面呢新建一个html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2020-03-05 21:25:22 · 4879 阅读 · 0 评论 -
Vue.js入门(五)---在vue中使用echarts词云
效果安装在vue项目中安装echarts和词云npm install echartsnpm install echarts-wordcloud引入echarts和词云main.js中加入import echarts from 'echarts'Vue.prototype.$echarts = echarts创建一个vuewordcloud.vue这个名字...原创 2020-02-28 20:39:45 · 32028 阅读 · 9 评论 -
Django个人博客搭建教程---用vue结合element-ui写搜索
搜索框如下<el-input clearable type="text" v-model="searchinfo" placeholder="搜索" size="medium" style="width:180px;"></el-input><el-button type="primar...原创 2020-02-26 17:27:53 · 5822 阅读 · 1 评论 -
Django个人博客搭建教程---用vue结合element-ui写分页
<el-table height="100%" :data="blogList.slice((currentPage-1)*pagesize,currentPage*pagesize)"> <el-table-column prop="date" label="序号" width="50"> <template scope="scope"...原创 2020-02-24 21:41:19 · 5915 阅读 · 0 评论 -
Django个人博客搭建教程---使用Ubuntu+Nginx部署你的Vue应用
/etc/nginx/nginx.conf添加这一段server { listen 8090; server_name www.guanacossj.com; index index.html; root /home/MyBlog/myblogfront/dist; location / { try_files...原创 2020-02-20 14:35:59 · 6117 阅读 · 0 评论 -
Django个人博客搭建教程---用Vue写你的第一个前后端分离页面
一、构建Vue.js前端项目npm install vue-cli -gnpm install webpack -g在项目根目录下(和你的app目录平级)vue init webpack myblogfront经过一系列设置之后,就会出现一个文件夹,这就是你的vue工程进入myblogfront目录,运行命令npm install npm install ...原创 2020-02-19 17:15:33 · 7235 阅读 · 0 评论 -
Vue.js入门(四)---用Pycharm创建你的第一个完整的HelloVue
一、在Pycharm中下载Vue.js插件二、新建一个Vue.js项目然后等待安装启动完成,这里提示我要不要用淘宝源,我果断同意啊三、项目启动四、项目目录结构'''-node_modules:项目的依赖-public -favicon.ico 网页的图标 -index.html 主页面-src:我们需要关注的 -asset...原创 2019-10-23 16:39:11 · 10490 阅读 · 0 评论 -
Vue.js入门(三)---在Mac下搭建Vue.js开发环境
默认安装好brew的情况下1、使用homebrew安装node.jsbrew install node2、检查是否安装成功node -vv12.10.03、获取nodejs模块安装目录访问权限sudo chmod -R 777 /usr/local/lib/node_modules/4、安装阿里npm镜像npm install -g cnpm --re...原创 2019-09-23 23:43:43 · 7947 阅读 · 0 评论 -
Vue.js入门(二)---组件化应用构建
<!DOCTYPE html><html><head><meta charset="utf-8"><title>learn_new_vue</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...原创 2019-09-23 15:29:51 · 7997 阅读 · 0 评论 -
Vue.js入门(一)---你的第一个Vue应用
最简单的入门Vue.js入门不需要安装node.js,不需要安装vue,也不需要安装vue-cli脚手架直接通过在htm中引入vue.js<!DOCTYPE html><html><head><meta charset="utf-8"><title>learn_vue</title><script...原创 2019-09-23 12:00:40 · 7886 阅读 · 0 评论