vue项目结构讲解
最后生成的项目目录结构1. build 文件夹：如上图，这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的...
2024-01-10
vue项目目录结构
本文介绍的是使用vue-cli3创建的项目，这里记录我的习惯，大家可自行修改，并希望给出更好的见意，下面进入正题。一、目录结构图首先展示一下整体结构，如果不符合大家的预期，就不需要往下看了。下面分别说明各目录的功能。二、目录结构说明目录说明备注zqyl-web项目名称前台项目扩...
2024-01-10
如何运行vue项目
在师兄的推荐下入坑vue.js ，发现不知如何运行GitHub上的开源项目，很尴尬。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。 首先，...
2024-01-10
vue项目打包压缩？
vue项目已经使用UglifyJsPlugin进行打包压缩了，上级要求项目打包之后js文件再小点，还有什么处理办法呢？希望大佬们能给点建议，如果可以的话，有点代码支持！拜谢！！！回答：webpack配置Compression-webpack-plugin压缩gzip文件https://segmentfault.com/a/1190000044007909回答：可以安装一下这个插件compres...
2024-02-05
一个vue练手的小项目
编程路上的菜鸟一枚 ：最近接触了vue 然后写了一个练手的项目使用vue-cli脚手架来搭建了的项目技术： vue2 + vue-router + ES6 + axios 框架有 mint-ui(不建议使用，早已经不更新了，推荐vant)，mui项目演示：新闻热播电影列表商品（用豆瓣电影模拟的）购买github地址：https://github.com/...
2024-01-10
vue项目运行端口问题
在运行vue项目时，项目配置端口与实际运行端口不一致这是什么原因 而且每一次重新启动的端口还都是随机的，没有重复的，困扰一天了，求解回答：npm install portfinder@1.0.21运行一下就可以了回答：今天也遇到这个问题了~！解决办法：在项目的 package.json 中新增一个属性：{ "resolutions": { "@vue/cli...
2024-01-10
vue项目解决跨域问题
vue在本地跑，run个dev啥的，会面临到跨域问题解决：在config的index.js文件里，dev模块加上：proxyTable: { '/api': { target:'http://zhinenghuapen', //你要请求的接口地址 changeOrigin: true, pathRewrite: { '^/api': '/' } }}像这样：target里写后端给你的API接口路...
2024-01-10
vue 项目打包报错?
vue 项目打包报错? 应该怎么调整？ error in ./src/store/modules/userStore.tsModule parse failed: Unexpected token (30:30)File was processed with these loaders: * ./node_modules/cache-loader/dist/cjs.js * ./nod...
2024-02-17
Vue项目-商城
Vue商城项目结构分析：固定的头部： mint-ui组件库的Header组件切换的组件： 放置一个router-view来展示路由匹配到的组件固定的底部： MUI框架的代码片断 tabbar制作tabbar中的图标图标的类名在icon.thml和icons-extra.html中查找使用icons-extra.html中的图标时要引入对应的字体文件和样式文件将tabbar中的链接...
2024-01-10
Vue项目使用细节
Runtime-compiler和Runtime-only的区别当我们使用Vue CLI2创建项目的时候，会提示让我们选择使用什么版本的VueRuntime + Compiler: recommended for most users（推荐给大多数用户）Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functi...
2024-01-10
Vue项目功能插件
vue-router{ path: '/', name: 'home', // 路由的重定向 redirect: '/home'}{ // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签 path: '/one-view', name: 'one', component: () => import('./views/OneView.vue')}{ // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>...
2024-01-10
vue目录结构解析
bulidwebpack相关代码config配置目录,端口号等node_modulesnpm项目依赖模块src 项目开发目录static静态资源文件,虚拟数据文件package.json项目配置文件...
2024-01-10
vue项目菜单点不动的问题
菜单点不动，console报错，刷新后正常在网上找到解决办法是router.onError((error) => { const pattern = /Loading chunk (\d)+ failed/g; const isChunkLoadFailed = error.message.match(pattern); const targetPath = router.history.p...
2024-02-15
vue项目加密之CBC加密
CBC加密1.添加工具类import CryptoJS from \'crypto-js\'const keyStrs = \'huayunabcd123456\'const keyIv = \'huayunkjsecurity\'export default {//加密 encrypt(word){ // cbc加密 let key = keyStrs; let iv = keyIv; key = CryptoJS.enc.Utf8.parse(key); iv = Cr...
2024-01-10
vue项目中使用骨架屏的方法
现在的应用开发，基本上都是前后端分离的，前端主流框架有SPA、MPA等，那么解决页面渲染、白屏时间成为首要关注的点webpack可以按需加载，减小首屏需要加载代码的体积；使用CDN技术、静态代码等缓存技术，可以减小加载渲染的时长问题：但是首页依然存在加载、渲染等待时长的问题。那么如何...
2024-01-10vue 项目 用户数据请求？
场景描述：目前项目将用户数据请求放在 App.vue 文件的 mounted 中而在路由拦截器中，会去判断用户是否为空当页面需要认证且用户数据为空时，路由会跳转到/login问题描述：当首次进入页面时，会先经过路由拦截器，再到 App.vue 中，调用请求数据的方法所以在 App.vue 中请求数据似乎不是很合理各位大佬平时在项目中是怎么实现的呢？回答：在login界面登录，登录成功后把toke...
2024-02-05
vue项目兼容ie踩得一些坑
几个人花了一个近一个月做了一个vue项目，后面说的vue项目要兼容ie，卒关于遇到的问题：1.es6 转 es5 转码 ①npm install babel-polyfill --save ②build目录下 webpack.base.config.js修改2.vuex-along影响ie兼容性通过修改了第一步，但是不知道为什么ie仍然不能出现界面，找了两个小时知道是vuex-along问题。由于vuex...
2024-01-10
vue项目-各类卡顿问题记录
1、慎重修改prop传来的对象数据父子组件，是通过prop组件来实现通信的。如果是个基础类型，在子组件修改了prop的值，vue会报错。但是如果是引用类型，不会报错，甚至还给你修改了。当我们使用父组件传来的prop对象来构建视图，并有修改操作的时候，你会发现，会卡，会卡，会卡。。。。所以不要...
2024-01-10
Vue项目优化打包详解
目录前言一、路由懒加载1.为什么需要路由懒加载2.如何实现路由懒加载3.路由懒加载中的魔法注释二、分析包大小1.需求2.如何生成打包分析文件三、webpack配置排除打包1.需求2.排除打包四、 引用网络资源1.需求2.CDN3. 实现步骤五、 打包去除console.log1.需求2.代码演示总结前言Vue项目开发完毕后，对项目...
2024-01-10
Vue项目基本配置封装
在很多时候，对于 vue 项目来说，很多刚入门，或者是受业务妥协的朋友大都是从百度 CV 一套看得过去的架子，如常见的 D2Admin ， vue-element-admin ，进行一个二次迭代的开发，其项目本身非常的优质，而在其 template 中去进行一个更改能够使得项目在一开始有一个很好的基础环境，但是如果没有花...
2024-01-10
Vue实战项目踩坑记录一
简单介绍一下：本人是UI转前端，有html，css基础，自学了js，vue。在公司做了几个项目，但都是写的业务代码，没有独自走过整体流程，这次跟着网上教程（Vue实战项目：电商管理系统（Element-UI）），提升一下整体能力一、elementUI不支持vue3.0跟着视频一顿操作，项目运行起来就遇到第一个坑，Cannot re...
2024-01-10
【vue】饿了么项目的相关笔记链接
http://www.mtons.com/content/1819.htmhttp://www.tuicool.com/articles/F7BnaiYhttps://segmentfault.com/a/1190000007784366http://www.tuicool.com/articles/7zUruijhttps://segmentfault.com/a/1190000008018314moment组件https://github.com/moment/moment/...
2024-01-10
项目vue2.0仿外卖APP（二）
vue-cli开启vue.js项目github地址：https://github.com/vuejs/vue-cliVue.js开发利器vue-cli，是vue的脚手架工具。在工地上，脚手架是工人搭建好的架子，能够帮助工人们作业；在技术圈，脚手架就是来帮助我们编写好基础的代码的工具。Vue-cli就是帮助我们写好vue.js基础代码的工具。使用Vue.js，当你构建一个原型...
2024-01-10
vue 项目软键盘回车触发搜索事件
目的：掉起来右下角为搜索的按钮步骤：1、input的type改为search，再写keydown按下时的事件调取搜索事件的方法这样安卓手机上回车就变成了“搜索”，不过ios仍然是换行2、input 外面套form，必须要有action，action=“javascript:return true”我的项目用van：想弹出数字键盘，并监听搜索（换行），在安卓上执...
2024-01-10
