vue
好了来看下一题
热爱可抵岁月漫长
展开
-
vue项目部署后,文件加载相对路径设置
vue项目部署后,文件加载相对路径设置vue项目打包放在oss服务器上,有时会因为oss上项目文件夹没有存在于配置的域名根目录下,就可能引起项目文件css、js等出现加载失败的情况例如:oss配置域名 https://web.aaaa.com/ ,项目文件夹目录为 ost/web/H5/ ,这样我们在加载项目文件夹目录下 index.html 时,就可能会出现css、js文件加载失败,因为我们如果设置了绝对路径,项目就会从域名根目录下找资源vue.config.js 文件修改项目配置文件public原创 2021-04-15 14:48:17 · 3241 阅读 · 0 评论 -
vite:极速、轻量构建工具(结合vue3 )
1.创建一个vite项目npm init vite-app <project-name>cd <project-name>npm install npm run dev或者yarn create vite-app <project-name>cd <project-name>yarn yarn dev2.vite简介vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:快速的冷启动,不需要等待打包转载 2021-03-19 17:59:41 · 457 阅读 · 0 评论 -
vant 推荐自动按需引入组件及组件重命名踩坑
vant 推荐自动按需引入组件安装插件npm i babel-plugin-import -D配置文件在.babelrc 中添加配置{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]}对于使用 babel7 的用户,可以在 babel.config.js 中配置module.expo原创 2021-03-17 14:30:39 · 1401 阅读 · 0 评论 -
vue项目中 vscode 配置别名路径提醒
vue项目中 vscode 配置别名路径提醒实现效果:vue项目中,输入路径 "@/..." 自动提示后续路径修改项目默认配置// vue.config.jsmodule.exports = { publicPath: "/", outputDir: "dist", lintOnSave: false, // 关闭eslint productionSourceMap: true, // 生产环境下css 分离文件 configureWebpack: { resolve原创 2021-03-15 18:34:38 · 1320 阅读 · 0 评论 -
使用 vue 开发一个简单的滑块拖动验证码
vue 简单的滑块拖动验证码组件// components/SlidingVerification/index.vue<template> <div class="jc-component__range"> <div class="jc-range" :class="rangeStatus ? 'success' : ''"> <i @mousedown="rangeMove" :class="rang原创 2021-03-11 11:44:45 · 1057 阅读 · 0 评论 -
Vue.config.productionTip = false 是什么意思
Vue.config.productionTip = false 是什么意思开发环境分为:本地开发环境、线上测试环境、线上生产环境等这句代码的作用是:阻止显示生产模式的消息 官网地址若 Vue.config.productionTip = true ,或者将这句话注释,控制台会打印一句话You are running Vue in development mode.Make sure to turn on production mode when deploying for production原创 2021-03-04 18:13:51 · 1147 阅读 · 1 评论 -
VUE报错 Uncaught (in promise) error
VUE报错 Uncaught (in promise) error原因:是因为后续并没有跟随任何 then | catch 语句,因此它将抛出错误,所以要养成良好习惯,promise记得写上catch可尝试在 then() 后加上 catch()login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { c原创 2021-03-03 16:26:18 · 8703 阅读 · 1 评论 -
vue项目中 configureWebpack 与 chainWebpack的区别及配置方式
configureWebpack 与 chainWebpackconfigureWebpack该对象将会被 webpack-merge 合并入最终的 webpack 配置。如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:对象式写法:const path = require("path");function resolve(dir原创 2021-03-03 10:36:45 · 8326 阅读 · 1 评论 -
VUE中使用router.addRoutes进行管理菜单权限
addRoutesvue 动态添加路由 官方文档需求:不同用户登陆后台,针对用户角色添加不同的权限思路:在路由全局前置守卫中,从后台获取用户最新的权限列表,使用 addRoutes 方法,动态更新用户权限// src/permission.jsimport router from './router'import { getToken } from '@/utils/auth' // get token from cookieconst whiteList = ['/login', '/原创 2021-03-01 19:39:45 · 1335 阅读 · 0 评论 -
webpack 配置
vue 中的 webpack 配置publicPath部署应用包时的基本 URL,这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。Default: ‘/’例如:module.exports = { // 基本路径 publicPath: '/c/'}那么,我们在使用本地服务器的时候,需要访问 http://localhost:8080/c/注意:./ 和 / 的区别如果设置 pu原创 2021-02-07 14:46:32 · 1149 阅读 · 0 评论 -
aliyun
aliyun使用阿里云,工程化管理打包文件,文件打包的同时,发布到的阿里云服务器上安装依赖npm i webpack-aliyun-oss -S配置依赖,根目录下新建// oss.jsmodule.exports = { region: 'your region', accessKeyId: 'your accessKeyId', accessKeySecret: 'your accessKeySecret', bucket: 'your bucket'}环境配置//原创 2021-01-19 18:20:14 · 183 阅读 · 0 评论 -
使用mock.js 生成假数据
使用mock.js 生成假数据安装 mock.js 和 axiosnpm install --save-dev mockjsnpm install --save axios1 封装 axiosutils 文件夹下新建 request.js 配置 baseUrlimport axios from 'axios'// axios 实例const request = axios.create({ baseURL: 'http://localhost:8086', withCredent原创 2021-01-11 17:55:59 · 774 阅读 · 0 评论 -
vue-mixins混入
mixins混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。混入:即把常用的方法、数据进行集合封装,方便在更多地方进行使用例如:很多长列表的加载需要 getData()、下滑到底部加载下一页数据、表格的搜索、点击页数跳转等,可以使用混入把这些方法进行封装,在不同的页面传入不同的参数公用这些方法使用utils/mixins 下新建 common-mixins原创 2021-01-06 19:39:50 · 267 阅读 · 0 评论 -
vue-mixins
mixins混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。混入:即把常用的方法、数据进行集合封装,方便在更多地方进行使用例如:很多长列表的加载需要 getData()、下滑到底部加载下一页数据、表格的搜索、点击页数跳转等,可以使用混入把这些方法进行封装,在不同的页面传入不同的参数公用这些方法使用utils/mixins 下新建 common-mixins原创 2021-01-06 19:38:15 · 91 阅读 · 0 评论 -
Vue项目从0到1完整开发
Vue项目从0到1完整开发1 项目准备npm install -g @vue/cli // 安装 vue 脚手架vue create my-vue // 创建 vue 项目,可选配置路由、vuex等cd my-vue // 进入项目文件夹yarn serve // 启动项目若使用 eslint+prettier 进行代码格式校验,当因为报错 'xxxxx' is defined but never used 而不能正常渲染的时候,可以在项目根目录下 .eslintr原创 2020-11-26 17:39:42 · 1019 阅读 · 0 评论 -
vue 移动端项目自适应
vue 移动端项目自适应npm installnpm run serve需求:vue 移动端项目,需要根据手机屏幕的大小自动适应,避免样式bug,使用插件项目自动转化为 rem 布局,未开始或进行中的项目都可以进行配置实现:通过对 vue 项目进行配置,使得项目在启动的时候,根据当前设备的屏幕尺寸把尺寸 px 自动转化为 rem ,如:在iphone6 375宽的标准屏幕下,di...原创 2020-04-17 15:09:04 · 1521 阅读 · 0 评论 -
Vue-router路由管理
Vue-router准备npm installnpm run servenpm run build项目结构-assets-components-router |-modules |-news.js |-user.js |-index.js-store-views |-news |-components |-news1.vue |-news2.v...原创 2020-04-17 12:54:11 · 150 阅读 · 0 评论 -
使用vuex对vue项目进行状态管理
vue状态管理npm installnpm run servenpm run build准备如果项目创建的时候已经安装过vuex,直接对 store 文件夹进行配置就可以如果项目没有安装过vuex,首先应该安装依赖npm install vuex // 安装依赖创建文件 src / store / index.jsimport Vue from "vue";import ...原创 2020-04-17 12:53:19 · 646 阅读 · 0 评论 -
vue组件封装说明
组件封装npm installnpm run servenpm run build一 通用组件通用组件:即为在各个页面均能使用的公共组件,例如navbar、input、button等封装 button 如下:新建 src / components / button 文件夹,内含 index.vue 和 index.less 文件index.vue:<template&g...原创 2020-04-17 12:51:31 · 190 阅读 · 0 评论 -
vue环境变量配置
vue3.0环境变量配置根据不同的指令:npm run serve // 搭建本地环境npm run dev // 生成测试环境文件夹(可自定义为devdist)npm run build // 生成生产环境文件夹(一般默认为dist)思路:1,创建修改相关配置文件(Ctrl + C V即可)2,封装 axios(根据配置文件,首先判断当前环境,获取对应环境的数据库地址作为当前环...原创 2020-04-11 15:48:30 · 1020 阅读 · 0 评论