# vue模板

**Repository Path**: zijid/vue

## Basic Information

- **Project Name**: vue模板
- **Description**: 这是一个vue项目的初始模板，内置了一些框架，方便使用修改，如有改善欢迎提交。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-15
- **Last Updated**: 2022-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vuex, Vue, Axios, mockjs, Router

## README

vue模板
-
引入了以下内容

1. vue框架

2. ui框架 elementUI

3. 路由框架 router

4. 状态共享框架 vuex
	定义了一个user模块 在里面使用请求
	
5. 网络请求框架 axios
	_`一个接口要改api内容，vuex内容 最后用this.$store.dispatch使用`_
	
	> 1. api内容为暴露一个方法并设置axios返回一个Promise对象
	> 2. vuex内容为制作actions方法，使用api提供的方法
	> 3. 最后在需要的地方使用this.$store.dispatch调佣vuex的异步方法
	
6. 模拟数据框架 mockjs
	_`/src/mockjs文件夹内有mockjs_help是我学习时记录的，有需要可以观看，是mock内置的一些方法的使用示例`_

说明:
-
	这是一个vue项目的初始模板，内置了一些框架，方便使用修改，如有改善欢迎提交。

拷贝项目

	git clone http://https://gitee.com/tnet1/vue
	
安装项目依赖

	npm i 

运行项目

	npm run serve

添加页面

	在 /src/view/ 中新建文件
	test.vue
	在 /src/router/index.js 中修改路由

index.js
```
const routes = [
	...
	{
		path: '/test',
		name: 'test',
		component: () => import("@/view/test.vue")
	}
]

```

添加接口

	在 /src/api/ 中创建js文件，如，info.js

info.js
```JavaScript	
import require from "./axios";

export function info(data) {//暴露info方法
	return require({
		url: "/api/info",
		method: "post",
		data
	})
}
```

	在 /src/store/modules/ 文件夹中创建新模块 info.js

info.js
```javascript
import {info} from '@/api/info'
let actions = {
	login(context, obj) {
		return new Promise((resolve, reject) => {
			info(obj).then((res) => {
				resolve(res.data)
			}).catch((err) => {
				console.log(err);
				reject(err);
			});
        })
	}
}

export default{
	namespaced: true,
	actions
}

```
在store模块中添加info模块
```javascript
import info  from "./modules/info";
let state=new Vuex.Store({
	...
    modules:{
		info
    }
})

```
在vue文件中使用

```javascript
this.$store.dispatch("info/info",[1,2]).then((params)=> {
	//操作
})
```
在mockjs中模拟 接口数据

	在 /src/mockjs/ 文件夹中创建info.js

info.js
```javascript
let info = [
	{
		url: "/info/info",
		method: "post",
		response: config => {
			//操作	
			reutrn "info"
		}
	}
]
module.exports = info
```
在/scr/mockjs/index.js 文件中引入info

	let info=require("./info")
循环生成mock接口

```JavaScript
info.forEach(item => {
	Mock.mock(url + item.url, item.type, (option) => {
		return item.response(option)
	})
});
```