Vue.js
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,容易学习。Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
大数据坚为
数据创造价值,每天进步一点点~
展开
-
vue中echarts使用
前言最近要在vue中使用echarts,觉得挺好玩的,这里记一下笔记。最终得到的是一个可自动刷新的可适应屏幕尺寸的图表,并可手动全屏使用安装echarts依赖npm i echarts -smain.js中配置echarts全局使用:/*全局使用echarts*/import Echarts from 'echarts'Vue.prototype.$echarts = Echarts;在子组件中使用:<!--测试图表--><template> <di原创 2020-08-27 16:35:22 · 625 阅读 · 0 评论 -
vue使用three.js参考代码
import Stats from 'stats.js';import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh, TextureLoader, DoubleSide } from 'three';export class Applica原创 2020-08-18 11:36:32 · 232 阅读 · 0 评论 -
vue.config.js常用配置
// vue.config.js常用配置module.exports = { // 基本路径,vue-cli3.3 以前请使用baseUrl publicPath:'/', // 输出文件目录 outputDir:'dist', // 用于嵌套生成的静态资产(js,css,img,fonts)的目录, assetsDir:'', // 生产环境sourceMap,开启会有报错,生产环境为节省空间应关闭 productionSourceMap:true, // webpa原创 2020-08-18 11:27:02 · 511 阅读 · 0 评论 -
数据统计模块
components/report下新建Report.vue<template> <div> <!--面包屑导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadc原创 2020-08-17 16:05:08 · 513 阅读 · 0 评论 -
修改用户状态与搜索功能,以及添加用户对话框
api接口文档修改switch@change:<el-table-column label="状态"> <!--作用域插槽,拿到这一行的数据--> <template slot-scope="scope"> <!--状态开关--> <el-switch v-model="scope.row.mg_state" @change="原创 2020-08-17 11:26:58 · 336 阅读 · 0 评论 -
实现分页效果
在表格<el-table>后增加一个分页组件</el-table> <!--分页区域--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5,原创 2020-08-17 10:34:15 · 526 阅读 · 0 评论 -
通过作用域插槽渲染操作列
修改el-table里的内容:<!--用户列表区域--> <!--stripe隔行变色,border加表格竖线--> <el-table :data="userList" stripe border> <!--加索引页--> <el-table-column type="index" label="#"></el-table-column> <el-tabl原创 2020-08-17 09:13:20 · 310 阅读 · 0 评论 -
自定义状态列的显示效果
使用作用域插槽获取当前行数据 <!--用户列表区域--> <!--stripe隔行变色,border加表格竖线--> <el-table :data="userList" stripe border> <!--加索引页--> <el-table-column type="index" label="#"></el-table-column> <el-ta原创 2020-08-17 09:09:18 · 195 阅读 · 0 评论 -
绘制用户列表组件的基础布局结构
因为需要在所有的界面中有面包屑和卡片,所以在全局样式globe.css中加入:.el-breadcrumb{ margin-bottom: 10px;}components/user/Users.vue写入:```css<template> <div> <!--面包屑导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-bread原创 2020-08-15 18:44:35 · 163 阅读 · 0 评论 -
保持左侧菜单的激活状态
el-menu有一个属性:可设置default-active="/users",设置index为/users的选项为激活状态但是这样就写死了,选择其他选项的时候不会激活,故需要进一步优化。主要思想,选中选项,将当前选中的选项的index替换掉default-active中的值修改Home.vue <el-menu background-color="#333744" text-color="#fff" activ原创 2020-08-15 16:33:28 · 861 阅读 · 0 评论 -
侧边栏路由链接改造
点击侧边栏里的选项,我们需要让它能有访问路由,可在<el-menu>中开启router:Home.vue中修改:接口中的path就是路由路径<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isColla原创 2020-08-15 15:27:57 · 212 阅读 · 0 评论 -
首页路由的重定向
components下新建Welcome.vue,前面创建vue文件的时候命名有点不统一,在这里修改一下:Welcome.vue:<template> <div> <h3>Welcome</h3> </div></template><script> export default { name: 'Welcome' }</script><style lang=原创 2020-08-15 15:03:18 · 368 阅读 · 0 评论 -
侧边栏展开/折叠
Home.vue中el-menu前增加 <!--页面主体区域--> <el-container> <!--侧边栏--> <!--侧边栏折叠与展开--> <el-aside :width="isCollapse ? '64px' : '200px'"> <!--点击折叠/展开--> <div class="toggle-button" @click="原创 2020-08-15 14:26:39 · 2248 阅读 · 0 评论 -
获取左侧菜单
自己原本制作的接口可能不太适合此练手项目,将api地址替换掉接口地址:https://www.liulongbin.top:8888/api/private/v1/main.js修改//配置axios全局使用import axios from 'axios'axios.defaults.baseURL='https://www.liulongbin.top:8888/api/private/v1/'login.vue中需修改Login()函数 Login() { // 预验证原创 2020-08-15 11:08:52 · 425 阅读 · 1 评论 -
axios拦截器使用
main.js中axios部分加入:// 请求拦截器axios.interceptors.request.use(config =>{ console.log(config) /*为请求头对象添加Token验证的Authorization对象,就不用每次都在要传送的字段上加token了*/ config.headers.Authorization=window.sessionStorage.getItem('token') return config})...原创 2020-08-15 10:01:43 · 180 阅读 · 0 评论 -
退出功能实现
因为我们是基于token实现登录,后续的请求没有携带token就会强制跳转到登录页面,所以实现退出功能,只需销毁本地存储的token即可将components下的Home.vue修改为:<template> <div> <el-button type="info" @click="logout">退出</el-button> </div></template><script> export de原创 2020-08-14 15:22:54 · 366 阅读 · 0 评论 -
使用vue路由导航守卫判断登录状态决定是否跳转
在router下的index.js的最最后面export default router前写入//挂载路由导航守卫router.beforeEach((to,from,next)=>{ // to 将要访问的路径 // from 代表从哪一个路径跳转而来 // next 是一个函数,表示放行 // next() 放行 next('/login') 跳转 if (to.path === '/login') return next(); //获取token const tok原创 2020-08-14 15:13:20 · 1386 阅读 · 0 评论 -
使用vue进行登录后路由跳转处理
接上文登录页面编写登录成功后在components文件夹下新建Home.vue:<template> <div> Home组件 </div></template><script> export default { name: "Home" }</script><style lang="less" scoped></style>router文件夹下index.原创 2020-08-14 14:11:17 · 2084 阅读 · 2 评论 -
使用vue编写登录页面详细过程
首先,创建项目loginvue create logincnpm install elementui vue-router vuex axios结构如下具体操作过程在main.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 './r原创 2020-08-13 15:55:22 · 16750 阅读 · 24 评论