DOS命令实现Vue项目的快速初始化
目录
源码
使用
源码
@REM 设置编码
chcp 65001
@echo off
mkdir .\src\api
mkdir .\src\router
mkdir .\src\config
mkdir .\src\utils
mkdir .\src\handle
mkdir .\src\mixs
mkdir .\src\assets\img
mkdir .\src\assets\video
mkdir .\src\components\MyPage\pc
mkdir .\src\components\MyPage\mobile
::创建axios初始配置文件
echo.import axios from "axios" > .\src\handle\AxiosHandle.js
echo.import MyRouter from "@/routers" >> .\src\handle\AxiosHandle.js
echo. >> .\src\handle\AxiosHandle.js
echo. >> .\src\handle\AxiosHandle.js
echo.export default function AxiosHandle() { >> .\src\handle\AxiosHandle.js
echo. //设置全局的超时时间 >> .\src\handle\AxiosHandle.js
echo. axios.defaults.timeout = 5000 >> .\src\handle\AxiosHandle.js
echo. //响应结果拦截器 >> .\src\handle\AxiosHandle.js
echo. axios.interceptors.response.use(response =^> { >> .\src\handle\AxiosHandle.js
echo. //登录凭证过期的操作 >> .\src\handle\AxiosHandle.js
echo. if (response!=null){ >> .\src\handle\AxiosHandle.js
echo. console.log(response) >> .\src\handle\AxiosHandle.js
echo. } >> .\src\handle\AxiosHandle.js
echo. return response; >> .\src\handle\AxiosHandle.js
echo. }, error =^> { >> .\src\handle\AxiosHandle.js
echo. let code=error.code >> .\src\handle\AxiosHandle.js
echo. console.log(error) >> .\src\handle\AxiosHandle.js
echo. >> .\src\handle\AxiosHandle.js
echo. return Promise.reject(error) >> .\src\handle\AxiosHandle.js
echo. }) >> .\src\handle\AxiosHandle.js
echo.}
echo.export const ApiOrigin="http://localhost:8080" >.\src\config\ApiOrigin.js
echo.import {ApiOrigin} from "./../config/ApiOrigin"; >.\src\api\UserAPI.js
echo.import axios from "axios";>>.\src\api\UserAPI.js
echo.>>.\src\api\UserAPI.js
echo.//示例API>>.\src\api\UserAPI.js
echo.export function getBook() {>>.\src\api\UserAPI.js
echo. return axios.get(ApiOrigin + "/Blog/getBook")>>.\src\api\UserAPI.js
echo.}>>.\src\api\UserAPI.js
echo.import {ApiOrigin} from "./../config/ApiOrigin"; >.\src\api\AdminAPI.js
echo.import axios from "axios";>>.\src\api\AdminAPI.js
echo.>>.\src\api\AdminAPI.js
echo.//示例API>>.\src\api\AdminAPI.js
echo.export function getAllUser(token) {>>.\src\api\AdminAPI.js
echo. return axios.get(ApiOrigin + "/Admin/getAllUser", {headers: {"token": token}})>>.\src\api\AdminAPI.js
echo.}>>.\src\api\AdminAPI.js
echo.const StatusMes = { >.\src\mixs\StatusMes.js
echo. data() { >>.\src\mixs\StatusMes.js
echo. return { >>.\src\mixs\StatusMes.js
echo. //成功的 >>.\src\mixs\StatusMes.js
echo. SAVE_OK: 20001, >>.\src\mixs\StatusMes.js
echo. DELETE_OK: 20002, >>.\src\mixs\StatusMes.js
echo. UPDATE_OK: 20003, >>.\src\mixs\StatusMes.js
echo. GET_OK: 20004, >>.\src\mixs\StatusMes.js
echo. PASSWORD_OK: 20005, >>.\src\mixs\StatusMes.js
echo. PASSWORD_OK_ADMIN: 20006, >>.\src\mixs\StatusMes.js
echo. //用户存在 >>.\src\mixs\StatusMes.js
echo. USER_OK: 20007, >>.\src\mixs\StatusMes.js
echo. //退出登陆 >>.\src\mixs\StatusMes.js
echo. Cancel_OK: 20008, >>.\src\mixs\StatusMes.js
echo. REGISTER_OK: 20009, >>.\src\mixs\StatusMes.js
echo. PAGE_OK: 20004, >>.\src\mixs\StatusMes.js
echo. //失败的 >>.\src\mixs\StatusMes.js
echo. SAVE_ERR: 10001, >>.\src\mixs\StatusMes.js
echo. DELETE_ERR: 10002, >>.\src\mixs\StatusMes.js
echo. UPDATE_ERR: 10003, >>.\src\mixs\StatusMes.js
echo. GET_ERR: 10004, >>.\src\mixs\StatusMes.js
echo. PASSWORD_ERR: 10005, >>.\src\mixs\StatusMes.js
echo. //用户不存 >>.\src\mixs\StatusMes.js
echo. USER_ERR: 10006, >>.\src\mixs\StatusMes.js
echo. //登录凭证失效 >>.\src\mixs\StatusMes.js
echo. LOGIN_LAPSE: 10017, >>.\src\mixs\StatusMes.js
echo. //异常处理 >>.\src\mixs\StatusMes.js
echo. SYSTEM_ERR: 10001, >>.\src\mixs\StatusMes.js
echo. SYSTEM_TIMEOUT_ERR: 10002, >>.\src\mixs\StatusMes.js
echo. SYSTEM_UNKNOW_ERR: 19999, >>.\src\mixs\StatusMes.js
echo. BUSINESS_ERR: 11002, >>.\src\mixs\StatusMes.js
echo. >>.\src\mixs\StatusMes.js
echo. //上传成功 >>.\src\mixs\StatusMes.js
echo. UPLOAD_OK: 2005, >>.\src\mixs\StatusMes.js
echo. UPLOAD_ERR: 10005, >>.\src\mixs\StatusMes.js
echo. } >>.\src\mixs\StatusMes.js
echo. }, >>.\src\mixs\StatusMes.js
echo. methods: { >>.\src\mixs\StatusMes.js
echo. >>.\src\mixs\StatusMes.js
echo. } >>.\src\mixs\StatusMes.js
echo.} >>.\src\mixs\StatusMes.js
echo.export default StatusMes >>.\src\mixs\StatusMes.js
@REM 路由文件初始化
echo.import VueRouter from "vue-router"; >.\src\router\index.js
echo.import axios from "axios"; >>.\src\router\index.js
echo.import {data} from "./details"; >>.\src\router\index.js
echo.//创建路由器 >>.\src\router\index.js
echo.const MyRouter = new VueRouter(data) >>.\src\router\index.js
echo.// 解决:Uncaught (in promise) NavigationDuplicated; >>.\src\router\index.js
echo.// 先保存一份 VueRouter.prototype.push方法 >>.\src\router\index.js
echo.let originalPush = VueRouter.prototype.push; >>.\src\router\index.js
echo.let originalRepace = VueRouter.prototype.replace; >>.\src\router\index.js
echo. >>.\src\router\index.js
echo.VueRouter.prototype.push = function push(location) { >>.\src\router\index.js
echo. return originalPush >>.\src\router\index.js
echo. // call(); 篡改上下文 >>.\src\router\index.js
echo. .call(this, location) >>.\src\router\index.js
echo. // catch(); 捕获异常 **** >>.\src\router\index.js
echo. .catch(e =^> e); >>.\src\router\index.js
echo.} >>.\src\router\index.js
echo.VueRouter.prototype.replace = function replace(location) { >>.\src\router\index.js
echo. return originalRepace.call(this, location).catch(e =^> e); >>.\src\router\index.js
echo.} >>.\src\router\index.js
echo. >>.\src\router\index.js
echo.//前置路由守卫,和后端的过滤器有点像,next()放行 >>.\src\router\index.js
echo.MyRouter.beforeEach((to, from, next) =^> { >>.\src\router\index.js
echo. console.log(to) >>.\src\router\index.js
echo. console.log(from) >>.\src\router\index.js
echo. next(); >>.\src\router\index.js
echo.}) >>.\src\router\index.js
echo. >>.\src\router\index.js
echo.//后置路由守卫,实现网页标题联动效果>>.\src\router\index.js
echo.MyRouter.afterEach((to) =^> {>>.\src\router\index.js
echo.document.title=to.meta.title ^|^| "幻梦博客">>.\src\router\index.js
echo.}) >>.\src\router\index.js
echo.export default MyRouter; >>.\src\router\index.js
@REM 路由详细路由初始化
echo.// 如果是移动端，给 .vue 的命名特殊处理 >.\src\router\details.js
echo.const path = navigator.userAgent.match(/(phone^|pad^|pod^|iPhone^|iPod^|ios^|iPad^|Android^|Mobile^|BlackBerry^|IEMobile^|MQQBrowser^|JUC^|Fennec^|wOSBrowser^|BrowserNG^|WebOS^|Symbian^|Windows Phone)/i) ? 'mobile/' : 'pc/' >>.\src\router\details.js
echo.console.log(path) >>.\src\router\details.js
echo.export const data={ >>.\src\router\details.js
echo. routes: [ >>.\src\router\details.js
echo. { >>.\src\router\details.js
echo. name: "index", >>.\src\router\details.js
echo. path: "/", >>.\src\router\details.js
echo. component: MyIndex=^>{require([`@/components/MyPage/${path}MyIndex`],MyIndex)}, >>.\src\router\details.js
echo. meta: {title: "xx"} >>.\src\router\details.js
echo. }] >>.\src\router\details.js
echo.}>>.\src\router\details.js
使用
新建文本文件，将以上代码复制进去，保存好修改后缀为.bat，然后将此文件，放在Vue项目的更目录，运行即可了。
运行完成即可，脚本创建了，这些常用的文件夹与配置文件
