vue项目基本流程
一、做项目基本流程:
1、规划组件结构
Nav.vue
Header.vue
Home.vue.....
2、编写对应路由
vue-router
3、具体些每个组件功能
一些公共的文件jquery,jquery插件,一般在index.html文件里面引用
分析项目需要的模块:
vuex vue-router axios
assets: 放置 静态文件 image,css,js
二、
watch:{//用来监视路由发生变化时触发
$route(to,from){
console.log(to.path)//to将要去的路由,from为原路由
if(to.path=='/user-info'){
this.$store.dispatch('show-header')//触发actions
}
}
}
---------------------------------------------------
三、axios:可以配置
axios不能Vue.use(axios)
axios.interceptors.request.use();//发送请求配置
axios.interceptors.response.use();//接收请求配置
axios.interceptors.request.use(function (config) { //配置发送请求的信息
stores.dispatch('showLoading')
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) { //配置请求回来的信息
stores.dispatch('hideLoading')
return response;
}, function (error) {
return Promise.reject(error);
});
将axios放在vue的原型上
Vue.prototype.$http = axios //其他页面在使用axios的时候直接 this.$http就可以了
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';设置axios post头部信息,使用表格格式传输
vue项目基本流程的更多相关文章
- Vue项目搭建流程 以及 目录结构构建
Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...
- vue项目创建流程和使用
vue项目的创建 npm run dev 让项目执行起来 #下载vuex npm install vuex --save#下载axiosnpm install axios --save 当我们生成项目 ...
- Vue项目搭建流程
记录一下vue项目的搭建流程. 1.安装node.npm 下载地址为:https://nodejs.org/en/ 设置环境变量,命令行分别输入: node -v npm -v 查看安装是否成功 ...
- VUE项目开发流程
前期准备 安装npm 安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况) 创建项目 初始化创建项目,项目名称.项目描述.拥有者等等 ...
- Vue项目开发流程(自用)
一.配置开发环境 1.1 安装Node.js npm集成在Node中,检查是否安装完成:node -v 1.2 安装cnpm(淘宝镜像) npm install -g cnpm,检查安装是否完成:cn ...
- vue项目部署流程
用vue-cli搭建的做法1.npm run build2.把dist里的文件打包上传至服务器 例 /data/www/,我一般把index.html放在static里所以我的文件路径为:/data/ ...
- linux 服务器 php vue项目部署流程总结
服务器配置 购买阿里云服务器 (选择ubuntu 16系统 / 内存2G以上) 安全策略, 入规则: 添加端口 20,21,22, 80, 443, 3306, 8080, 安装宝塔 wget -O ...
- vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
- Vue开发项目全流程
只记录vue项目开发流程,不说明怎样安装node和vue-cli等 确认安装 安装好node之后,可查看是否安装成功,有版本则安装成功.输入node -v 查看vue是否安装成功,有版本则安装成功.输 ...
随机推荐
- Apache Shiro 核心概念
转自:http://blog.csdn.net/peterwanghao/article/details/8015571 Shiro框架中有三个核心概念:Subject ,SecurityManage ...
- 五 : springMVC拦截器
springMVC拦截器的实现一般有两种方式 第一种方式是要定义的Interceptor类要实现了Spring的HandlerInterceptor 接口 第二种方式是继承实现了HandlerInte ...
- [国嵌笔记][025][ARM指令分类学习]
算术和逻辑指令 1.mov 格式:mov {条件}{s} <dest>, <op> 作用:把一个值从一个地方移动到另一个地方,<dest>必须是寄存器 示例: @m ...
- 从零开始学习前端JAVASCRIPT — 5、JavaScript基础BOM
1:BOM(Browser Object Model)概念 window对象是BOM中所有对象的核心. 2:window属性(较少用) self:self代表自己,相当于window. windo ...
- Asp.net mvc 中Action 方法的执行(一)
[toc] 在 Aps.net mvc 应用中对请求的处理最终都是转换为对某个 Controller 中的某个 Action 方法的调用,因此,要对一个请求进行处理,第一步,需要根据请求解析出对应的 ...
- 【问题解决】Eclipse中 ctrl+空格 content assist
改一下你的快捷键设置:window->perferences-->keys--->查找 content assist--->把这个地方改成你想要的就可以了.!
- 解析MYsql explain执行计划extra列输出
EXPLAIN Extra 列信息: explain Extra列输出包含了关于mysql如何解决query的额外信息,特别是出现Using filesort 和 using temporary时,应 ...
- eclipse怎么修改工作空间路径
1.打开eclipse,在eclipse界面中的菜单栏中点击“文件”,如果您的eclipse是英文版,那么应该是file,打开后点击“切换工作空间" 2.如果您的eclipsehi英文版,则 ...
- Jpa 本地方式实现数据的持久化【千锋】
Jpa本身支持多种方式的对象持久化,比如数据库方式,还有一种方式就是本地文件的方式,本文来讲解以本地方式实现的数据持久化,具体的资源大家可以参阅一下网站:http://www.objectdb.com ...
- python基础5之装饰器
内容概要: 一.装饰器前期知识储备 1.python解释函数代码过程: python解释器从上往下顺序解释代码,碰到函数的定义代码块不会立即执行它,而是将其放在内存中,等到该函数被调用时,才执行其内部 ...