在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' export default { BASE_URL } 2.在入口文件中引入,设置为全局变量 import global_ from '../config/global.js' Vue.prototype.GLOBAL = global_; 3.在有需要的地方引入baseUrl created() { con

Vue 项目代理设置的优化 Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式, 这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试, 也就是使用了 Vue-cli 设置的配置 proxyTable 或者直接使用 Webpack-dev-server 提供的 proxy 选项.它是采用了 http-proxy 库,所以具体配置可查看: https://github.com/nodejitsu/node-http-proxy#options 利用配置的这些

前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = store.state.token; 之前是吧token刚在data里面的 是我封装的一个get 请求,亲测有用.现在我们项目就是用的这一种 然后放一个请求成功的实例 首先会先发一个 OPTIONS 预请求 然后发出正式请求 第二种方法: 不能局限于一种方法嘛! 第二种方法是:在Vue实例中设置

1.开发环境: 2.生产环境: 然后 const instance = axios.create({ baseURL: process.env.API })

1. 首先安装vue插件,安装方法: setting  -->  plugin  ,点击plugin,在内容部分的左侧输入框输入vue,会出现两个关于vue的插件,点击安装即可.安装完成后,就可以看到,新建文件时,会有vue文件的提示. 如下图所示: 2. 设置vue新建文件模板. 步骤: settings  -->  file and code templates .在内容区域左侧点击vue file,修改对应的模板内容即可. 如下图所示: 3. 设置vue文件支持的编码格式(例如:支持的缩

项目需要前端获取后台返回的cookie,并以此作判断.我是在main.js入口文件下使用的 具体代码: new Vue({ el: '#app', router, template: '<App/>', components: { App }, methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行编码encode(),前端取出来之后用decodeURI('string')解码.(安卓可以取中文cookie,IOS不行)    g

WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步 点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项: 第二步 打开启动设置页面后,点击左上角的加号添加新的运行方式: 第三步 在弹出的选择框中,选择node.js启动模式: 第四步 在新打开的设置页面中,在红色圈中的地方设置如图路径的文件: 至此设置成功,直接点启动按钮就可以部署项目.

# 第一次做前端工程 # 记一个今天犯傻调查的问题 ---------------------------------------------------------------------------------- Front-End: Vue-Project(vue + vue-router + vuex + axios) 地址:http://localhost:3000/ http://localhost:3000/AModule    ----地址1:OK http://localhos

1.安装axios yarn add axios 2.在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 Vue.prototype.getRequest = getRequest;//注入到vue对象 Vue.prototype.postRequest = postRequest;//注入到vue对象 3.创建api接口 1:src目录下创建libs文件夹 2:在libs文件夹中创建api.js接口文

1. 首先安装vue插件,安装方法: setting  -->  plugin  ,点击plugin,在内容部分的左侧输入框输入vue,会出现两个关于vue的插件,点击安装即可.安装完成后,就可以看到,新建文件时,会有vue文件的提示. 如下图所示: 2. 设置vue新建文件模板. 步骤: settings  -->  file and code templates .在内容区域左侧点击vue file,修改对应的模板内容即可. 如下图所示: 3. 设置vue文件支持的编码格式(例如:支持的缩

第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', component: Login, meta: { title: '登录' } } 如果是公共组件,在跳转时根据条件来动态设置title,可以在最

1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-wechat-title="$route.meta.title"></div>

需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slider"> <h1>Hamy</h1> </div> </template> <script> export default{ name:'index', data(){ return{ sliderStyle:{ width:'240p

  大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子组件,从而设置不同的图片路径 1.子组件实现 <div class="customerIntroduce-left"> <!-- 父组件传入图片路径 --> <img :src=image_path /> </div> export defa

在新的页面设置height无效果的时候.需要改动App这个文件的heigth 解决办法.给app这个盒子设置高度.默认情况下为0 设置高度100%时,div的高度会等同于其父元素的高度.而上面中id为app的div(vue挂载的div)的父节点是body标签,body标签的父节点是html标签.在默认情况下html和body标签的高度为auto,而浏览器是不会自动给标签添加高度的,所以html和body标签就为0,自然子div的高度设置为100%就不起作用了 html,body,#app{ he

1.查询ip地址 win+R打开cmd 窗口 输入ipconfig 找到IPV4地址   192.168.x.xxx 2.在vue项目config文件夹中的index.js,将localhost换为ipv4地址 host: '192.168.x.xxx', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a fre

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router> <templa

备注:设置开始时间小于结束时间 <!-- 开始时间 --> <div class="block"> <!-- <span class="demonstration">开始时间</span> --> <el-date-picker v-model="startTime" type="date" placeholder="选择开始日期" :pic

在main.js添加过滤器,可以 Vue.http.interceptors.push((request,next)=>{ //request.credentials = true; // 接口每次请求会跨域携带cookie //request.method= 'POST'; // 请求方式(get,post) //request.headers.set('token','111') // 请求headers携带参数 next(function(response){ return respons

npm i webpack --save-dev npm install style-loader css-loader url-loader babel-loader sass-loader file-loader babel-core --save-dev npm i vue --save-dev npm install babel-polyfill --save npm install babel-runtime --save npm install babel-plugin-transf

import fn from 'fn' Vue.prototype.fn = fn; 调用的时候 this.fn.way