vue项目开发的目录结构

一、通过命令行工具安装vue（npm install webpack vue-project）

build -- 项目构建的相关代码
config -- 配置目录，包括端口、环境等的配置
src -- 开发的主要目录

-- asset : 放置一些图片

-- components ：主要放置一些常用的组件文件

-- App.vue：项目的入口文件(顶层父组件)

-- main.js：项目的核心文件(vue的实例初始化)

-- page：新建一个目录，主要存放页面

README.md：markdown的说明文档
package.json：npm的配置文件

二、vue-router

vue-router是vue的核心插件，使用vue-router，我们可以将组件映射到路由，然后告诉vue-router在哪里渲染它们

安装

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Router常用的配置属性

routes: 配置路由的属性
mode：设置配置路由的模式(默认'hash'[浏览器环境]) -- 'abstract'[node.js环境] -- 'history'[HTML5 History API]
scrollBehavior：滚动行为的配置(在按下后退/前进按钮，项浏览器的原生那样)
数据获取：完成导航(路由)再获取数据、导航完成前回去(路由进入的守卫中获取数据【路由改变前，组件就渲染完成】)

具体的api见 https://router.vuejs.org/zh-cn/

三、生命周期的理解

beforeCreate：创建前的状态(创建实例前，vue实例的属性值为undefined)
created：实例创建完成后(data被定义了，但el属性为undefined)
beforeMount：挂钩前(DOM渲染前)，el属性已经拿到对应的DOM元素
mounted：挂载结束后(Dom渲染完成后，el属性的Dom的数据将被渲染)
beforeUpdate：数据变化前的调用
updated：数据变化后的钩子
beforeDestroy：销毁前状态
destroy：销毁完成

四、ajax请求(后台数据交互) -- axios

1. 配置编译环境和线上环境的切换(env.js)

let baseUrl = '';
let routerMode = 'hash'; /*vue-router的路由模式  --- 所有浏览器支持*/if (process.env.NODE_ENV == 'development') {}else if(process.env.NODE_ENV == 'production'){baseUrl = 'http://www.xxx.com:8001';
}
/*暴露出去*/
export {baseUrl,routerMode
}

2. 拦截器(fetch.js)

axios模块下：

/** 拦截器的配置** */
import axios from 'axios';
import { baseUrl } from './env';
import { Message } from 'element-ui';//创建实例时设置配置的默认值
const service = axios.create({baseURL: baseUrl,timeout: 2000, //请求超时的时间//对返回的数据进行处理transformResponse: [function (data) {// 对 data 进行任意转换处理return JSON.parse(data);}],//发送到服务器的数据进行转换和处理transformRequest: [function (data) {// 对 data 进行任意转换处理return JSON.stringify(data);}]});//请求拦截器
service.interceptors.request.use( (config) => {//请求前的回调函数let token = '';if(token){config.headers['X-user-token'] = token;}return config;
}, (err) => {return Promise.reject(err);
});//响应拦截器
service.interceptors.response.use((res) => {if(res){//非登录 -- 路由重定向}return res;
}, (err) => {Message.error('服务器有事离开一下，马上就回来');return Promise.reject(err);
});
export default service;

vue项目开发的目录结构相关推荐

【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
vue项目完整的目录结构
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
vue项目开发实录--仿去哪儿网App-张鹏-专题视频课程
vue项目开发实录--仿去哪儿网App-160人已学习课程介绍本课程为vue项目开发实录(仿去哪儿网App)其中涉及到知识点有:组件搭建,路由,vuex,axios,webpack ...
python import sql脚本_13-模块介绍-import两种方式-py文件的两种用途-模块搜索路径-项目开发的目录规范...
1.模块的介绍与使用模块import 1.1.模块的介绍 1.1.1.什么是模块? 模块就是一组功能的集合体,我们的程序可以导入模块来复用模块里的功能.在python中,模块的使用方式都是一样的,但其 ...
1.TomCat配置以及JavaWeb开发的目录结构
1. 部署并启动 tomcat 服务器. 1). 解压 apache-tomcat-6.0.16.zip 到一个非中文目录下 2). 配置一个环境变量. java_home(指向 JDK 安装的根目录 ...
Vue项目开发需要准备和配置些什么环境？
Vue项目开发需要准备和配置些什么环境? 一.首先需要安装node.js 下载:安装node.js链接安装在D盘 window+R,输入cmd,打开命令提示符窗口,输入: npm -v 检测是否安装 ...
Unity项目如何组织目录结构
前言组织好项目的目录结构,是维护项目的很重要的一个点,我们学习别人源码,了解别人的设计思路都是从目录结构开始,一个清晰的目录结构,对项目开发维护,项目管理来说非常的重要,目录维护的好,大家在一起工作 ...
Unity项目如何组织目录结构，有几个习惯与你相同
前言组织好项目的目录结构,是维护项目的很重要的一个点,我们学习别人源码,了解别人的设计思路都是从目录结构开始,一个清晰的目录结构,对项目开发维护,项目管理来说非常的重要,目录维护的好,大家在一起工作 ...

vue项目开发的目录结构

vue项目开发的目录结构相关推荐

最新文章

热门文章