![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WEB项目全局性功能集合
文章平均质量分 73
基于VUE的WEB项目的全局性功能集合,包含空白项目搭建,http二次封装,缓存配置,环境变量配置,nginx服务部署等方面的内容。
tom_wong666
tom_wong666
展开
-
[问题探讨]基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署
需求:基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署分析:如下图Alibaba Cloud Toolkit其实是按步骤做了手动部署需要做的三件事情:1,npm run build打生产包2,通过ftp服务将生产包放入配置好的nginx服务目录中3,启动.sh脚本完成部署首先,我们来实现一次手动部署一...原创 2019-11-06 17:21:02 · 1298 阅读 · 0 评论 -
[问题探讨]VUE项目为新环境配置新的npm run打包命令
需求:VUE项目为新环境配置新的npm run打包命令,为此命令定义专属环境变量,比如预发布环境npm run preDeploySTEP1:先上图解释npm run build命令如何获取环境变量1,npm run build命令调用 build文件夹中的build.js2,build.js调用了build文件中的webpack.prod.conf.js3,webpack.prod....原创 2019-11-05 20:28:51 · 539 阅读 · 0 评论 -
[问题探讨]VUE项目基于keep-alive实现缓存
需求:WEB项目实现缓存缓存需求分析:一般分为三类1,缓存确定的某些页面;2,缓存打开的页面,关闭时取消缓存;3,前进刷新,后退缓存;缓存实现基本模型1,v-if + keep-alive// 路由配置export const constantRouterMap = [ { path: '/', component: PageA, name: 'Pag...原创 2019-11-05 11:28:46 · 234 阅读 · 0 评论 -
[配置]rem设置
背景:移动项目或者响应式网站需要尺寸自适应;选型:rem;rem定义:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数;设置函数: resizeFontSize(){ //获取根元素 const docEl = document.documentElement; //获取设备宽度 cons...原创 2018-11-15 16:51:00 · 3098 阅读 · 0 评论 -
[配置]vue中mockjs的配置和使用
需求:前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs。配置:1,npm安装依赖npm install mockjs --save-dev2,新建mock文件夹,里面再新建index.js文件和MyInfo.js文件,inde...原创 2018-11-15 18:49:33 · 7091 阅读 · 2 评论 -
[配置]集中管理Vue项目中的http请求
需求:项目中难免有多个http请求,如果分散在各个页面中,对于查看和修正都极其不便,所以想把他们集中在一个service中;分析:思路1:做一个普通的service,用文件http.api.js集中存放http请求,然后在需要做http请求的页面引入这个文件;问题:需求可以实现,问题在于每个页面都要引用一次,相对麻烦;思路2:用文件http.api.js集中存放http请求,然后将这个服务...原创 2018-12-09 22:49:34 · 2111 阅读 · 0 评论 -
[配置]VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL HOST
需求:VUE开发前端项目,需要分环境配置URL和做相关处理思路:通过process.env做判断和处理实现一:环境区分1,找到项目配置文件夹:config文件夹2,进入如下三个文件:dev.env.js 对应开发环境test.env.js 对应测试环境prod.env.js 对应生产环境找到如下代码:// 开发环境module.exports = merge(prodEn...原创 2019-05-02 19:25:12 · 27409 阅读 · 2 评论 -
[demo]新建一个vue空白项目并上传到github上
如题,这是两个问题:一,如何建立一个vue空白项目;二,如何把自己的项目上传到github上去。因为想做一个个人的vue项目,放到github上,就记录了过程,给大家参考。环境说明:win 10+npm5.6.0+vue 2.9.6+git2.18.0.windows.1下面分步骤介绍。如何建立一个vue空白项目:1,资料盘或桌面新建一个文件夹,文件夹名字不要带特殊...原创 2018-09-15 01:02:34 · 2464 阅读 · 0 评论 -
[问题探讨]VUE项目通过js-cookie实现cookie操作
需求:VUE项目cookie操作实现工具:js-cookie上代码// 安装js-cookienpm i js-cookie// 组件中引入import Cookies from 'js-cookie'// 组件中使用// 写入cookieCookies.set('name', 'value')// 读取Cookies.get('name') // => 'value'...原创 2019-10-31 20:11:38 · 368 阅读 · 0 评论 -
[问题探讨]VUE项目通过axios做http拦截及将Token写入请求头中
需求:VUE项目http请求和响应的拦截实现工具:axios上代码:// 项目安装axiosnpm install axios// main.js中引入axiosimport axios from 'axios'// 请求拦截axios.interceptors.request.use(function (config) { // 在请求发出之前做一些处理 // 设...原创 2019-10-31 20:01:46 · 215 阅读 · 0 评论