vtemp 说明文档

GitHub repository

vtemp

vue-template

有意见或者建议请提 issues

安装

yarn:

yarn add  vtemp

npm:

npm install vtemp

创建项目

vtemp create  <project>   # 例如 vtemp create my-vtemp

根据提示选择ts、js, 是否安装完成启动项目并打开浏览器

目录结构

├─public  html模板以及ico
├─src
│  ├─api  接口请求assets
│  ├─assets  静态资源目录components
│  ├─components   公共组件
│  ├─router 自动化处理路由配置文件
│  ├─store  vuex-store
│  ├─view 页面目录

项目开发

项目开发目前提供如下功能：

• 创建Vue组件 默认目录 src/components
• 创建Vue页面，并配置路由 默认目录 src/views
• 创建Axios封装模块(request) 默认目录 src/utils
• 创建Api(request接口请求模板) 默认目录 src/api

注:

根据项目类型会自动生成匹配的文件(.ts .js)以及默认文件路径,无需手动输入, 如果您仍然需要生成自定义的请输入可选参数, 自行配置

可选参数:

-d --dest <dest>                       create path (文件创建地址)
-t --type <type>                       create type , js or ts (文件创建类型, js或者ts)

创建Vue组件：

vtemp component <componentName> # 例如vtemp component NavBar，默认会存放到src/components文件夹中

创建Vue页面，并配置路由

vtemp page <filename> # vtemp page Home，默认会放到src/pages/Home/Home.vue中，并且会创建src/views/Home/router.js
vtemp page <filename> -d src/views2 -t ts # 也可以指定文件夹和类型，但指定文件夹需要手动集成路由

注意:

1. 由于router是自动生成的, 创建页面之后src/router/index并没有更改,webpack不会重新执行一次src/router/index, 此时你需要在文件中随便写个字符, 触发webpack的热更新

2. 组件以及页面指定类型js或ts需统一

3. 如果您的项目类型不一致, 需要去src/router/index.ts中做如下修改

创建Axios封装模块(request)

vtemp request # 例如 vtemp request，默认会放到src/utils中
vtemp request -d src/axios # 也可以指定文件夹 但是我并不建议你这么做 

创建Api(request接口请求模板)

vtemp api <filename> # 例如 vtemp api Home，默认会放到src/api中,生成Home.js文件
vtemp api <filename> -d ./api -t ts # 也可以指定文件夹和类型

划重点

不需要任何配置, 顺其自然就好, vtemp懂你想要的

历史版本

1.0.0

第一版,勉强能用 创建api指定类型存在问题

1.0.1

修复第一版的bug(创建api指定类型存在问题), 并且顺手写了个文档

1.0.2

啊这... 刚刚项目目录结构没写好,再发一版吧 屮

2.0.0

船新版本, 支持ts js双模板并向上兼容

English Documentation

阿巴阿巴阿巴~

I don't know English

I don't know English, thanks~