快速生成 vue 项目各种模板
目前支持的模板:
- vue 组件
- api 文件
- 路由文件
- vuex 文件
- mock 文件
|-- apiTemplate.js api模板
|-- compTemplate.js vue组件模板
|-- gen.js 生成模板脚本
|-- routeTemplate.js 路由模板
|-- vuexTemplate.js vuex模板
|-- mockTemplate.js mock模板
-
安装依赖
npm i quick-vue-template
-
因为模板生成依赖于
chalk
和inquirer
两个包,所以先安装依赖npm i chalk inquirer
-
在项目的
package.json
中增加如下命令"scripts": { ...... "gen": "gen" },
-
运行命令
npm run gen
-
选择模板类型
-
输入生成文件名称
-
默认生成在 vue 项目的 src 目录下
-
如果要指定文件路径,请以
@
开头(@
代表的是src
目录),比如@/views/userList/userList.vue
生成的文件目录如下:|-src |-views |- userList |- userList.vue
-
下载 git 库
git clone https://github.com/jingping-ye/quick-vue-template.git
-
将下载下来的 repo 放在项目根目录下,如下:
|- project |- quick-vue-template // 下载下来的repo |- src // 项目的src目录 |- ...
-
安装相关依赖
cnpm i inquirer chalk -D
-
在
package.json
中添加如下命令"scripts": { ... "gen": "node quick-vue-template gen" },
-
运行
npm run gen
即可
-
如果要修改模板,只需在对应文件修改。
-
依赖于
chalk
和inquirer
,使用前请安装。npm i chalk inquirer
<template>
<div class="simpleComp">
simpleComp组件
</div>
</template>
<script>
// 常量声明
const value = {
msg:"Hello World!"
}
export default {
name: 'simpleComp',
components:{},
props:{},
data(){
return {
// 常量
value,
// 状态
flag:true,
// 变量
list:[],
}
},
computed:{},
watch:{},
methods:{
test(){
console.log("Hello World!")
}
},
mounted(){}
}
</script>
<style scoped>
.simpleComp {
}
</style>
<template>
<div class="fullVueComp">
fullVueComp组件
</div>
</template>
<script>
// 常量声明
const value = {msg:"Hello World!"};
// 引入外部资源
// import someThing from 'SomeThing';
export default {
name: 'fullVueComp',
mixins:[],
components:{},
props:{},
data(){
return {
// 常量
value,
// 状态
flag:true,
// 变量
list:[],
}
},
computed:{},
watch:{},
methods:{
test(){
console.log("Hello World!")
}
},
created(){},
mounted(){},
destoryed(){}
}
</script>
<style scoped>
.fullVueComp {
}
</style>
/**
* Title: api
* Author: 作者
* Date: 2020-05-25 15:17:05
* Description: API文档
* LastModifiedDate:2020-05-25 15:17:05
* LastModifiedDescription: 修改描述
*/
import http from "@/utils/http";
const prefix = "v1"; // 可以在此处写"v1/",自动拼接路径
const api = {
list: `${prefix}/api/list`,
update: `${prefix}/api/update`,
delete: `${prefix}/api/delete`,
add: `${prefix}/api/add`,
detail: `${prefix}/api/detail`,
};
/**
* 获取列表
* @param {object} argsParams
* @param {number} argsParams.isDelete 是否删除状态 0-正常[default]|1-删除
* @note 备注
* @usage 使用示例
*/
function getApiList(argsParams = {}) {
return http
.get(api.list, {
params: argsParams,
})
.then((res) => {
return Promise.resolve(res);
})
.catch((err) => {
return Promise.reject(err);
});
}
/**
* 更新
* @param {object} argsParams
* @note 备注
* @usage 使用示例
*/
function updateApi(argsParams = {}) {
return http
.put(api.update, argsParams)
.then((res) => {
return Promise.resolve(res);
})
.catch((err) => {
return Promise.reject(err);
});
}
/**
* 新增
* @param {object} argsParams
* @note 备注
* @usage 使用示例
*/
function addApi(argsParams = {}) {
return http
.post(api.add, argsParams)
.then((res) => {
return Promise.resolve(res);
})
.catch((err) => {
return Promise.reject(err);
});
}
/**
* 删除
* @param {object} argsParams
* @note 备注
* @usage 使用示例
*/
function deleteApi(argsParams = {}) {
return http
.delete(api.delete, { data: { ...argsParams } })
.then((res) => {
return Promise.resolve(res);
})
.catch((err) => {
return Promise.reject(err);
});
}
/**
* 获取详情
* @param {object} argsParams
* @note 备注
* @usage 使用示例
*/
function getApiDetail(argsParams = {}) {
return http
.get(api.detail, {
params: argsParams,
})
.then((res) => {
return Promise.resolve(res);
})
.catch((err) => {
return Promise.reject(err);
});
}
export default {
getApiList,
updateApi,
addApi,
deleteApi,
getApiDetail,
};
/**
* Title: route
* Author: 作者
* Date: 2020-05-19 15:07:27
* Description: Route文档
* LastModifiedDate:2020-05-19 15:07:27
* LastModifiedDescription: 修改描述
*/
const routeRoute = [
{
path: "/route",
name: "Route",
redirect: "route",
component: () => import("someComponent"),
meta: {
title: "route",
},
children: [
{
path: "route",
name: "Route",
components: {
default: () => import("someComponent"),
},
meta: {
title: "菜单名称",
icon: "code",
},
},
],
},
];
export { routeRoute };
/**
* Title: vuex
* Author: 作者
* Date: 2020-05-19 15:08:46
* Description: Route文档
* LastModifiedDate:2020-05-19 15:08:46
* LastModifiedDescription: 修改描述
*/
const state = {};
const getters = {};
const mutations = {};
const actions = {};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
/**
* Title: user
* Author: 作者
* Date: 2020-06-03 22:41:11
* Description: mock文档
* LastModifiedDate:2020-06-03 22:41:11
* LastModifiedDescription: 修改描述
*/
import { user } from "../data/user";
import { getQueryParam } from "@/utils/comUtils";
let userList = user;
const userService = {
add(config) {
const { name } = JSON.parse(config.body);
let addId = userList.length < 10 ? `0${userList.length + 1}` : userList.length + 1;
userList.push({
id: `user_${addId}`,
name,
});
return {
code: 20000,
data: {
message: "添加成功",
},
};
},
delete(config) {
const { id } = JSON.parse(config.body);
userList = userList.filter((item) => item.id !== id);
return {
code: 20000,
data: {
message: "删除成功",
},
};
},
update(config) {
const { id, name } = JSON.parse(config.body);
let updateIndex = userList.findIndex((item) => item.id === id);
userList[updateIndex] = {
id: id,
name: name,
};
return {
code: 20000,
data: {
message: "更新成功",
},
};
},
getList(config) {
let queryParams = getQueryParam(config.url);
let { pageNum = 1, pageSize = 10 } = queryParams;
// 数据分页
const pageList = userList.filter((item, index) => index < pageSize * pageNum && index >= pageSize * (pageNum - 1));
return {
code: 20000,
data: {
total: userList.length,
list: pageList,
},
};
},
};
export default userService;