- 博客(24)
- 收藏
- 关注
RSS订阅原创 vuex持久化和模块化写法记录
2、不使用插件方式：存储在localStorage或者sessionStorage，state定义变量，mutations同步更新变量，并且存储一份在localStorage或者sessionStorage中，actions异步请求，触发mutations同步更新，getters(store的计算属性。必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
2022-10-18 16:00:40
684
原创 vue-cli3多环境打包配置
背景框架vue2+工具vue-cli3（其实我本地已经到vue-cli5，不过不影响，项目目录与3保持一致，但是打包貌似有一点区别，下文会讲），项目需要在生产环境打包不同的二级目录。
2022-08-02 11:12:18
2865
原创 vue-cli2多环境打包配置
背景：框架vue2+工具vue-cli2，项目需要打包两个角色，三个运行环境：本地，测试，生产，上线发布有的直接在根目录下，有的需要在二级目录下。一、增加打包配置文件1、config文件夹增加4个环境变量文件，build文件夹增加7个打包配置文件2、新增环境变量文件： 添加规则按照已有环境变量添加即可，名字自己取，最好见名知意，图中的APP_USER_TYPE自定义，如果需要更多自定义变量自行增加即可。3、新增build文件：拷贝已有build文件，修改process.env.N
2022-05-27 17:06:15
3005
原创 前端性能优化
参考链接：Vue项目前端性能优化https://mp.youkuaiyun.com/mp_blog/creation/editor/106750434提升90%加载速度——vuecli下的首屏性能优化https://segmentfault.com/a/1190000019499007?sort=votes项目中使用过：1、路由懒加载，不使用静态引入2、productionSourceMap: false，npm run build打包编译不生成map文件，减少文件体积。3、小图标使用字体图标，图标..
2022-05-27 14:04:06
113
原创 nginx部署nuxt多项目
一、背景：之前使用nginx部署了一个nuxt的项目，参考的是这篇文章Nuxt项目的部署，现在部署多项目，先参考的是这篇文章 nginx配置多个项目 ，使用Nginx要在同一个域名下配置多个项目有两种方式：nginx按不同的目录分发给不同的项目 启用二级域名，不同的项目分配不同的二级域名采用：我现在是测试服，是IP，没有域名，所以选择第一种方式，创建不同项目。原本同一个IP+端口已经上...
2020-04-03 00:38:52
3191
原创 误引用vuex-persistedstate导致用户信息无法清除问题
一、问题：网站使用nuxt框架，使用js-cookie+vuex存储用户信息，在这一篇文章中关于nuxt使用vuex存储以及获取用户信息踩坑，我讲过nuxt是服务端和客户端渲染集成，所以服务端将user信息初始化为空，客户端无法再次初始化，即便客户端的cookie中能获取到用户信息，也无法给user赋值。后来在网上搜索了半天解决办法，引入了vuex-persistedstate,但是引入之后并...
2020-03-29 19:12:53
2988
原创 iconfont字体图标错位问题
原因：加入了问题图标，至于为什么是问题图标，原因不详，反正对比两个版本的图标css文件删除多余的问题，图标错位问题就解决。错位显示：正常显示：...
2020-03-24 17:46:58
1842
原创 关于nuxt使用vuex存储以及获取用户信息踩坑
一、背景：按公司要求做一个电商网站，考虑到seo，所以用的是nuxt进行开发。登录之后记录用户信息（user）使用cookie+vuex模式。二、具体使用方法以及遇到的问题：1、无法解码且无法转化为对象：使用nuxt的nuxtServerInit在在服务端的cookie里获取用户信息，但是user在存储时是对象且可能包含中文，在使用JSON.parse进行string转化为对象时报错，...
2020-03-23 23:37:21
3194
4
原创 vue init nuxt-community/koa-template nuxt-learn 安装执行npm run dev报错
最近在做一个基于vue的美团全栈项目，技术栈用到nuxt和koa的组合，vue init nuxt-community/koa-template nuxt-learn创建项目之后，执行npm run dev，报错 ERROR Failed to compile with 1 errors ...
2019-05-30 11:59:46
1351
1
原创 td文字过多隐藏
td文字过多一般的解决方法：td { width: 150px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; float: left;}但是如果td包裹的文字太多，会把td设置...
2018-12-05 14:07:13
1332
转载 CommonJS、requirejs、ES6的对比
CommonJS、requirejs、ES6的对比模块化开发，AMD，CMD，Commonjs规范CMD、AMD、CommonJS 规范
2018-11-26 11:24:59
319
原创 node-sass安装失败之npm ERR! Failed at the node-sass@4.9.4 postinstall script.
一个npm install报了一堆问题gyp verb check python checking for Python executable "python2" in the PATHgyp verb `which` failed Error: not found: python2gyp verb `which` failed at getNotFoundError (E:\s...
2018-11-26 01:16:19
9565
转载 信不信由你！iPhone6屏幕宽度不一定是375px，iPhone6 Plus屏幕宽度不一定是414px
转载请注明：原创文章来自优快云 freshlover的空间 http://blog.youkuaiyun.com/freshlover/article/details/44454991
2018-11-20 16:46:05
573
原创 使用label美化样式的input点击事件踩坑
如图，做一个类似select的自定义选择框，但可多选。使用label对checkbox样式美化，有两种方式。1、包裹式，点击事件给label或者li<li> <label class="checkboxLable"> <input type="checkbox"/> <i> <em>&l
2018-10-15 10:44:18
3168
1
原创 listen EADDRNOTAVAIL
换了一台电脑，运行了一个vue项目，报了一串错误：E:\bqc\web\currencyMobiel>npm run dev> usevue@1.0.0 dev E:\bqc\web\currencyMobiel> webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsev...
2018-10-12 17:45:01
794
原创 node版本过低导致@babel配置文件出错
因为之前的node安装包是在菜鸟教程下载的，版本较低，所以在使用npm导致执行gulp命令时报以下错误： E:\bqc\html\game\node_modules\@babel\core\lib\transformation\file\file.js:75 constructor(options, { ^SyntaxError: U...
2018-10-12 13:01:40
11231
原创 低版本node安装使用gulp时npm install生成的node_module部分插件包文件源路径过长无法删除问题
因为更换电脑的原因，导致软件重装，只保留了src和配置文件，需在新电脑生成node_module依赖包。第一步是安装node，第二步是安装gulp，再执行npm install，再输入gulp，项目就跑起来了，与以往相同。但是在准备删除node_module包重新安装node_module包，发现里面有三个文件因为文件源路径过长的原因无法删除，虽然网上有方法删除，但是这里需要的是和以往相同直接删除...
2018-10-12 11:16:25
1791
原创 pc全屏网页布局小技巧
今天又写了一个全屏网页，其实之前也写了很多次，一直都没有总结，今天在这里总结出来的小技巧记录一下。pc的设计图一般都1920的，但是还有很多小屏，比如自己的笔记本就是1366，如果说完全按照设计图的尺寸布局，那放在小屏幕上浏览时总会有一些地方不协调，字体过大，图片过大，间距过大。下面就以今天的网页为例解析一下遇到的情况。1、字体不协调的问题 这个时候em这个...
2018-06-17 02:44:45
5118
原创 jQuery+css3实现图片立体旋转效果
最近公司项目要求做一个图片3d立体旋转的效果，领导给了我一个参考文件，链接稍后附上，今天主要讲实现效果关键的几点：perspective+transform-style+transform-origin。先贴一张效果图：一、需了解的知识点：1、如何让一个2d平面的图呈现3d效果？ 答：此时需要使用css3的一个透视属性：perspective属性，这个...
2018-01-03 14:48:53
10859
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人