随笔分类 -  vue

springboot整合vue07-前后端分开部署
摘要：需要用nginx做动静分离； 静态资源直接请求vue工程生成的dist目录； 如果需要访问后台接口获取json数据，则在nginx中配置反向代理来转发到springboot工程监听的端口； 1.上传到linux 将vue工程打包后的dist目录、springboot打包后的jar包上传到linux服 阅读全文
posted @ 2020-04-10 09:49 L丶银甲闪闪 阅读(598) 评论(0) 推荐(0)
springboot整合vue06-前后端整合部署
摘要：1.打包vue工程 命令： npm run build 会生成一个dist目录： 2.拷贝前端打包文件 将dist目录中的文件拷贝到springboot工程的resource/static目录下 这个目录是springboot工程存放静态资源的目录； 启动springboot工程，浏览器访问：htt 阅读全文
posted @ 2020-04-10 09:44 L丶银甲闪闪 阅读(1497) 评论(0) 推荐(0)
springboot整合vue05-处理不需要的导航栏
摘要：因为导航栏是遍历路由表来的，但有些不想出现，需要处理； 思路： 可以在路由，router目录下的index.js中，给每个路由添加一个参数show； 想显示的值为true，不想显示的值设为false； 然后在v-for遍历时，用v-if判断show的值来决定是否显示； router/index.js 阅读全文
posted @ 2020-04-10 09:41 L丶银甲闪闪 阅读(357) 评论(1) 推荐(0)
springboot整合vue04-前后端数据交互
摘要：1.分页列表 打开elementui官网，地址：https://element.eleme.cn/#/zh-CN 找一个看顺眼的列表拷贝代码到vue工程； 然后找一个看顺眼的分页组件，拷贝代码到vue工程； 后台提供一个分页接口 @RestController @RequestMapping("/b 阅读全文
posted @ 2020-04-10 09:40 L丶银甲闪闪 阅读(1918) 评论(0) 推荐(0)
springboot整合vue03-创建springboot工程
摘要：1.新建工程 用springboot启动器创建工程 选依赖： web项目需要 ->springweb orm框架选 ->jpa 数据库驱动选 ->mysql 2.新建数据库 -- MySQL dump 10.13 Distrib 8.0.11, for macos10.13 (x86_64) -- 阅读全文
posted @ 2020-04-10 09:35 L丶银甲闪闪 阅读(488) 评论(1) 推荐(0)
springboot整合vue02-创建前端页面
摘要：1.页面布局 因为之前在工程中添加了elementui，因此用elementui来做页面； 打开elementui官网：https://element.eleme.cn/#/zh-CN 找到组件-》Container布局容器 找一个看得顺眼的，复制代码到自己的工程的App.Vue中； 代码： <te 阅读全文
posted @ 2020-04-10 09:32 L丶银甲闪闪 阅读(1323) 评论(1) 推荐(0)
springboot整合vue01-创建vue工程
摘要：1.创建vue脚手架 命令： vue ui vue ui需要vue-cli3.0以上版本； 如果版本低可以升级： npm uninstall -g vue-cli npm install -g @vue/cli 会在浏览器中打开ui页面; 点创建按钮 预设：选手动 功能：选常用的vuex、路由等 选 阅读全文
posted @ 2020-04-10 09:29 L丶银甲闪闪 阅读(595) 评论(0) 推荐(0)
vue学习时遇到的问题（二）
摘要：1. this.$nextTick veu中进行数据改变后，并不会马上刷新视图；用nextTick可告诉执行下个函数后马上刷新视图； this.$nextTick(function(){ //执行完该方法后刷新视图 }) this.$nextTick(function(){ //执行完该方法后刷新视 阅读全文
posted @ 2019-05-14 16:24 L丶银甲闪闪 阅读(159) 评论(0) 推荐(0)
vue学习时遇到的问题（一）
摘要：1.vue的异步组件，require()方法 作用是：在需要使用的时候，从 根目录/components/HelloWorld.vue 加载组件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export 阅读全文
posted @ 2019-05-14 16:23 L丶银甲闪闪 阅读(225) 评论(0) 推荐(0)
关于vuex
摘要：vuex时vue工程的状态管理工具； 主要用来处理vue各个组件之间值传递的问题； 适用于比较复杂的工程； 文档地址：https://vuex.vuejs.org/zh/ 主要概念： 1）this.$store ： 我们可以通过 this.$store 在vue的组件中获取 vuex的实例。 2）S 阅读全文
posted @ 2019-05-14 16:20 L丶银甲闪闪 阅读(126) 评论(0) 推荐(0)
vue使用ajax
摘要：1.Vue的Ajax基本用法 在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址：https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.js 简单的get请求： 创建一个 阅读全文
posted @ 2019-05-14 16:19 L丶银甲闪闪 阅读(736) 评论(0) 推荐(0)
vueCli和脚手架
摘要：vue CLI相当于一个基于vue开发的框架；可以用来快速开发vue项目； 1.安装 由于需要用到npm命令，所以要先安装node.js； node.js下载地址：https://nodejs.org/en/ 用到的npm命令： # 查看版本 $npm -v #升级 npm cnpm install 阅读全文
posted @ 2019-05-14 16:19 L丶银甲闪闪 阅读(159) 评论(0) 推荐(0)
vue路由
摘要：1.vue路由的基本使用 如果要用vue做页面跳转的效果必须使用路由； 需要用到vue.js和vue-router.js; vue-router.js的下载地址：https://unpkg.com/vue-router@3.0.2/dist/vue-router.js 主要步骤： 1）定义路由组件 阅读全文
posted @ 2019-05-14 16:18 L丶银甲闪闪 阅读(239) 评论(0) 推荐(0)
vue组件
摘要：1.简单的vue组件使用 组件可分为全局组件和局部组件； 全局组件用Vue.component方法来指定； 局部组件在新建Vue实例时用components属性来指定，只能被父组件使用； 组件创建时需要指定组件名和组件属性； 通过组件名作标签可以直接引用组件；例如：global作为组件定义时的名字； 阅读全文
posted @ 2019-05-14 16:14 L丶银甲闪闪 阅读(250) 评论(0) 推荐(0)
vue的简单使用
摘要：1.使用vue 下载vue.js； 下载地址：https://vuejs.org/js/vue.min.js；打开链接后是一大堆js代码；ctrl+s保存即可； 新建一个html，引入vue.js; 在html中写js脚本，新建一个Vue实例，实例中必须指定元素id; 将id引入到需要用到vue的h 阅读全文
posted @ 2019-05-14 16:13 L丶银甲闪闪 阅读(163) 评论(0) 推荐(0)