VUE
记录VUE使用小技巧
「已注销」
这个作者很懒,什么都没留下…
展开
-
vite vue3使用<icon-svg>来使用svg图标
安装vite-plugin-svg-iconsnode version: >=12.0.0vite version: >=2.0.0npm i vite-plugin-svg-icons -D配置vite.config.ts 中的配置插件import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { resolve } from 'path'import viteSvgIco原创 2021-10-27 16:26:36 · 2514 阅读 · 0 评论 -
vite 配置 1.文件夹别名 2.全局css
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { resolve } from 'path'export default defineConfig({ // 文件夹别名 @ 为src目录 resolve: { alias: { '@': resolve(__dirname, 'src') } }, css: { //css预处理 p原创 2021-10-27 15:29:39 · 1334 阅读 · 0 评论 -
Node.js Express 跨域
// 允许跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Content-Type"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // res.header("Con.原创 2021-07-30 15:01:33 · 120 阅读 · 0 评论 -
网页自动适配 Mac 的 Dark Mode
prefers-color-scheme可以检测到用户是否已请求操作系统使用浅色或深色主题,其有三个可选的选项:no-preference:未能检测到用户的选择 light:用户倾向于使用浅色的主题 dark:用户倾向于使用深色的主题,例如用户开启了 Mac 中的深色模式所以,在这里我们可以使用prefers-color-scheme: dark来检测用户是否开启了 Dark Mode。...原创 2021-06-15 14:22:09 · 438 阅读 · 1 评论 -
Vue watch监听数据 ECharts异步加载数据
axios.get('/xxxxxr', { params: { xxxxx: xxxxxxx, } }) .then( ({data}) => { this.setOptionaData = data })watch:{ setOptionaData( { data } ) { let a = data.map((x) => x.batchNumber) let b = data.map((x) =>原创 2021-06-10 21:27:18 · 702 阅读 · 0 评论 -
Vue引入ECharts图表
<div id="main" style="width: 60vw;height:700px;"></div>mounted() { this.initCharts();},methods: { initCharts() { this.initCharts = echarts.init(document.getElementById('main')); this.setOptiona() }, setOptiona() { this.i原创 2021-06-10 21:14:08 · 93 阅读 · 0 评论 -
Element UI table宽度自适应
<el-table-column prop="chineseName" header-align="center" align="center" label="单位名称" :width="flexColumnWidth('chineseName',this.dataList)"></el-table-column>在methods{ }里声明函数: // 自适应表格列宽 flexColumnWidth(str, tableData, flag =转载 2021-06-09 17:59:14 · 3522 阅读 · 0 评论 -
Vue+axios下载文件
Vue+axios下载文件// An highlighted blockdownload() { this.$http({ url: this.$http.adornUrl(""), method: "post", params: this.$http.adornParams({ }), responseType: 'blob', }).then((r原创 2021-05-21 17:57:22 · 224 阅读 · 0 评论 -
Vue项目页面跳转时,窗口上方显示进度条(Vue使用NProgress)
Vue项目页面跳转时,窗口上方显示进度条(Vue使用NProgress)1.安装2.安装3.基本用法NProgress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress1.安装npm install nprogress2.安装在router配置文件下导入import NProgress from 'nprogress'import 'nprogr原创 2020-12-13 13:57:07 · 595 阅读 · 1 评论 -
解决Vue history模式下路由跳转时页面404问题
当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面原创 2020-11-23 17:09:23 · 3177 阅读 · 0 评论 -
VUE CLI 4.x 打包成APP后白屏解决办法&&打包APP教程
一般用VUE打包项目后,再把项目打包成APK安装包,在手机上打开应用我们会发现打开是一片白,这是什么原因呢?路由模式为history模式。资源的路径不对。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,而我们打包成应用时应把路径修改为相对路径,这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。接下来就教大家如何把VUE项目打包成APK用VUE CLI创建项目vue create demo选择Manually select features自原创 2020-11-22 12:21:59 · 1907 阅读 · 0 评论 -
VUE2 v-for 图片不显示解决方法
VUE CLI4.x v-for 图片不显示解决方法 <div> <ul> <li v-for="item in items"> <img :src="item.src"> {{item.id}} </li> </ul></div><script> export default{ data(){ return{ items:[{ src:'../im原创 2020-11-22 11:18:15 · 658 阅读 · 0 评论