![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 92
k55
这个作者很懒,什么都没留下…
展开
-
Webpack简易使用
Webpack 是一个前端资源加载/打包工具,可以根据配置将项目模块打包成静态资源。webpack官网文档nodejs下载地址然后next到底在cmd中输入也可以只在项目中安装也可以只在项目中安装在webpack.config.js用的是CommonJs语法(4).在根目录下执行命令因为webpack只能处理js/json资源,但是在开发中还需要需要加载css、img,将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件原创 2022-07-05 18:03:29 · 528 阅读 · 0 评论 -
jenkins部署vue,利用Nginx部署并推送到k8s
以下项目是个纯vue项目,在项目中加入k8s、nginx、Dockerfile模块1、配置Dockerfile将nginx文件下的nginx.conf复制到Nginx配置文件下并将vue打包后的dist复制到指定目录下FROM nginxRUN mkdir /usr/share/nginx/dist \ && rm -rf /etc/nginx/nginx.conf \ && /bin/cp /usr/share/zoneinfo/Asia/Sha原创 2020-11-09 13:14:11 · 1352 阅读 · 0 评论 -
jenkins配置vue利用tomcat并配置到k8s
1、在jenkins上配置纯vue项目自启动,并且让此项目运行在k8s搭建的服务器上2、进入配置后,本人项目是托管在svn的就选择了subversion选项,将项目地址和账户密码配置好3、如果需要运行在k8s上那么配置如下,如果不需要无需配置4、配置nodejs环境5、配置项目运行过程echo '==============开始构建前端代码==================='cd 项目跟目录echo '==============安装检查开发依赖包================原创 2020-08-03 11:22:19 · 380 阅读 · 0 评论 -
vue高德地图点聚合
遇到的问题:因为需要展示渔船估计,因为早期渔船上面的GPS是10分钟上传一个经纬度点,所以在地图上展示经纬度点非常多,显得非常密集。解决这些密集点的办法就是通过点聚合来做。点聚合: 可以在不同的地图缩放级别对海量的数据点进行聚合展示,点聚合插件可以支持10万个点,性能良好。未做聚合之前(此为测试数据,GPS在陆地上):以下开始使用点聚合尝试一下:点聚合代码 var _rende...原创 2020-04-22 15:07:49 · 5689 阅读 · 2 评论 -
vue移动端项目适配
这里介绍使用lib-flexible插件去做适配,使用lib-flexible,给div设置了一个宽度(px),它会跟手机分辨率大小自动调节1、安装npm install lib-flexible --savenpm install px2rem-loader --save2、导入在main.js中导入import 'lib-flexible/flexible'3、配置1) 找到b...原创 2020-03-18 11:09:16 · 968 阅读 · 0 评论 -
jenkins配置java项目自动打包、vue自动打包、配置k8s
1、进入jenkins配置界面2、配置svn配置项目的来源,可以使git或者svn,本公司使用svn,我这里就是使用svn做演示。配置好项目的地址和相关的账号密码即可。3、配置java打包本项目采用springboot或者springcloud做框架,采用mvn做包依赖4、配置vue自动打包先看一下我的项目目录配置node.js环境,如果不配置npm运行不了5、保存配置...原创 2020-03-06 18:12:39 · 898 阅读 · 0 评论 -
router.beforeEach() 动态加载路由出现死循环问题
采用beforeEach做路由过滤,如果没登录就直接跳转到登录界面,然而发现个问题就是要么跳转到登录页面、然后再调回首页,要么卡着不动、要么出现空白页面。1、router.beforeEach( to , from ,next) 介绍to: 即将路由的地址form: 当前的路由地址,也就是马上要离开的地址next(): 执行进入下一个路由next(false): 禁止进入下一个路由ne...原创 2020-03-06 14:42:48 · 8654 阅读 · 1 评论 -
vue-element-admin教程
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。vue-element-admin让后端程序员也能轻松上手做一些前端页面,而且配置打包都很简单。vue-element-adm...原创 2019-12-11 16:22:39 · 7247 阅读 · 0 评论 -
vue中使用Element UI
Element-UI 是一套饿了吗团队开发的开源的UI框架,为开发者、设计师和产品经理准备的基于 Vue 2.0 的PC端组件库1、安装element ui进入项目根目录npm i element-ui -S1)、全局引入element ui在main.js中添加element-ui引用import ElementUI from 'element-ui'import 'element...原创 2019-11-29 00:18:24 · 2273 阅读 · 0 评论 -
vue中使用Mint UI以及排坑
1、Mint ui介绍Mint UI 是饿了么团队开源的一款基于 Vue.js 的UI组件库(主要是针对移动端)特性:(1)、Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。(2)、按需加载组件,可以加载声明过的组件,不必要引入全部的UI组件,需要用什么就选择性的用什么,这样可以减小我们项目的体积,加快加载速度。(3)、在移动端渲染性能高,体验流畅...原创 2019-11-28 12:45:52 · 583 阅读 · 0 评论 -
vue的路由vue-router
路由允许我们通过不同的 URL 访问不同的内容,换句话说通过路由可以切换不同的页面1、安装、配置路由进入项目根目录npm install vue-router --save新建index.js文件,并在此文件中中引入vue-router路由模块import VueRouter from 'vue-router'使用vue-routerVue.use(VueRouter)在main...原创 2019-11-27 18:39:19 · 121 阅读 · 0 评论 -
vuex实战
vuex是一个专门为vue.js设计的集中式状态管理架构,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex可以方便进行组件(页面)之间的传值vuex可以对数据持久化1、安装vuex进入根目录npm install vuex --save2、新建store.js文件新建store.js文件在此文件中写入import Vue fro...原创 2019-11-27 15:08:28 · 260 阅读 · 0 评论 -
vue组件传值的几种方式
一、父子组件、非父组件传值1、父组件向子组件传值父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据,子组件的props接收父组件穿过来的值即可父组件子组件2、子组件向父组件传值子传父的实现方式就是用了 this.emit来遍历getData事件,首先用按钮来触发setData事件,在setData中用this.emit 来遍历 getData 事件,首先用按钮来触...原创 2019-11-27 10:52:28 · 5370 阅读 · 0 评论 -
vue请求数据的方式
1、使用vue-resourcevue-resource体积小、支持主流浏览器(IE9以下也支持)、支持Promise异步计算、支持拦截器在vue2.0之后vue-resource不再更新,推荐使用axios1) 安装vue-resource进入项目根目录npm install vue-resource --save一定要加上 --save ,这样可以直接写入package.json...原创 2019-11-26 18:27:52 · 674 阅读 · 0 评论 -
使用vue-cli3搭建项目
vue-cli3是vue-cli2的升级版,vue-cli3并不是vue3.0,vue-cli3和vue-cli2编译方式不一样一、通过命令行创建1、安装vue-cli3如果已经安装了vue-cli2 就要先卸载npm uninstall vue-cli -g安装vue cli3npm install -g @vue/cli2、创建vue-cli3项目vue create test...原创 2019-11-21 14:47:04 · 101 阅读 · 0 评论 -
在webstom中关闭ESLint格式化检查
1、进入设置去除ESLint2、进入代码影藏一下代码原创 2019-11-15 18:06:11 · 327 阅读 · 0 评论 -
在webstom中对vue代码格式化
1、在webstom中格式化vue代码的时候会出现报错格式化快捷键ctrl+alt+L其实是因为js代码缩进问题1、第一种方式此方法请测有效果,组织script代码缩进2、第二种方式此方法是我自己摸索出来的,通过eslint修正先通过ctrl+alt+L修正代码格式,但是这时候script代码会报错然后在通过ctrl+alt+k,通过ESLint对script进行修正...原创 2019-11-15 17:35:32 · 3035 阅读 · 1 评论 -
使用vue-cli构建vue项目
1、要先安装node.jsnodejs下载地址1)选择一个版本直接下载,然后安装2)测试是否安装正确在命令行中输入2、使用vue-cli构建vue项目1)先全局安装vue-clinpm install -g vue-cli2)选择webpack模板初始化项目vue init webpack my-vue此时无需运行 nmp install命令3)启动项目初始化...原创 2019-11-15 15:26:05 · 178 阅读 · 0 评论