随笔分类 - VUE
摘要:1. 前端跨域解决方案 request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ baseURL: '/api', // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都
阅读全文
摘要:修改nginx的配置文件 server { listen 8080; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { try_files $uri $uri/ /i
阅读全文
摘要:for循环的三种用法 1、第一种是我们平常用的最多的for循坏 如: 普通的for循环 ,显得繁琐,i为for为数组赋予的序号 let totalPrice = 0 for (let i = 0; i < this.books.length; i++) { totalPrice += this.bo
阅读全文
摘要:数组转字符串: var list = ['a','b','c'] var listString = list.join(',') //变成字符串后,以逗号分隔 console.log(listString) 字符串转数组: var string = '1,2' var list = string.s
阅读全文
摘要:含义 POST、DELETE、PUT、GET 就像对应着数据库的 CRUD(增、删、改、查) 使用标准: POST /uri 创建 GET /uri/xxx 查询 PUT /uri/xxx 更新或创建 DELETE /uri/xxx 删除 GET请求,用于向服务器发送查询数据的请求,只是查询,不会增
阅读全文
摘要:首先是路由守卫 beforeEach((to, from, next) => { to // 要去的路由 from // 当前路由 next() // 放行的意思 } 但是在看别的项目时常常能看到next('/login') 、 next(to) 或者 next({ ...to, replace:
阅读全文
摘要:前几天Vue3.0正式发布,也说明了Vue3.0后面不会再有大规模改动,大家可以开始系统性学习了,虽然目前大多数公司使用的还是Vue2.0,但这只是一个过渡阶段,Vue3.0经历了两年的开发,在去年Vue2.0也引入了Vue3.0体验组件,后面基本是新项目肯定会使用Vue3.0,Vue2.0到Vue
阅读全文
摘要:(一)vue-cli 命令 1. vue-cli下载安装: vue-cli2: npm install vue-cli -g vue-cli3/cli4: npm install -g vue@cli 2. 创建新项目 vue-cli2: vue init webpack 2.0project vu
阅读全文
摘要:vue-cli 打包压缩(npm run build)文件后,默认根目录修改,解决前后端代码结合的路径问题。 将config/index.js文件中的assetsPublicPath 值修改为你需要的根目录,原来默认是‘/’,加上"XXX/", “XXX”是本项目的项目名,服务URL默认根目录会加上
阅读全文
摘要:一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpa
阅读全文
摘要:一、less安装 1.安装less和less-loader npm install less less-loader --save-dev 2.安装成功后,打开build/webpack.base.conf.js ,在module.rules 中添加一段: { test: /\.less$/, lo
阅读全文
摘要:在前端开发的过程中一般会打印很多的日志但是要发布到线上的时候不希望客户看到其他的信息,但是一个一个的注释太麻烦也不利于以后进行更新 下面是个很简单的方法一行代码解决 在main.js中加入以下一行代码 console.log = function() {} 如果要进行修改代码进行打印日志查看的时候就
阅读全文
摘要:不使用map辅助函数: computed: { test:()=> this.$store.getters.doSome } 使用map辅助函数: computed: { ...mapGetters({ 'test': 'doSome' }) } 似乎看起来使用map辅助函数更麻烦,其实不然,当我们
阅读全文
摘要:解决方法: 文件-》首选项-》设置 在设置里面直接贴上代码: "vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatterOptions": { "js-beautify-html":
阅读全文
摘要:$refs 尽管有props和events,但是仍然需要在JavaScript中直接访问子组件。 为此可以使用ref为子组件指定一个索引ID。 注意,ref并不是动态更新的,也就是说不应该绑定变量,而是写一个固定值即可。 在home.vue中添加list组件 <div class="home"> <
阅读全文
摘要:什么是Getters?它有什么作用? Getters 我们可以理解为store仓库的一个计算属性,它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选,再把这个结果重新计算并提供给组件使用。举个例子: store.js 此时,getters 会暴露出一个stor
阅读全文
摘要:接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。 接口定义遵循几个规范: 1. 接口按功能模块划分。 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单管理 : 菜单管理
阅读全文
摘要:使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的,但是因为组件封装的原因,隐藏按钮在头部组件,而导航菜单在导航菜单组件,这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改,导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷
阅读全文
摘要:组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue <template> <div class="container"> <!-
阅读全文
摘要:如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面
阅读全文