vue框架—src下的代码结构

主要结构介绍,不做全部介绍,可自己新建,词义符合就行。
结构注意:整洁,一目了然。
api:
增加接口的文件夹,使用import导入具体服务名称,常量,export导出方法
使用index.js暴露出去(其中index引入文件夹中内容,export导出)
调用api接口的方法绑定到windows上,使用try…catch…返回结果或异常值

assets:
静态资源及一些样式配置

components:
element-ui组件,基础组件及业务组件

config:
form表单等的相关配置

router:
路由

文件夹下基本使用index导出
使代码结构整洁,一个index代表一个模块,如组件,路由,api接口等。
路由文件Index.js文件举例:

Import Vue from ‘vue’;
Import VueRouter from ‘vue-router’;
Import routes from ‘./routes’;
Vue.use(VueRouter);//注册路由插件
//注册路由
const router = new VueRouter({
routes
}
)
Export default router;

其中路由的routes.js文件:

//路由是数组:增加routes.js将路由对象转成数组
Export default{
	path:/XM,
	name:XM_ROUTE_NAME_MAIN,
	component() => import(../pages/XM/XMComponents”),
	chidren: XM_ROUTES,
}

你可能感兴趣的:(vue框架,前端,架构,vue.js,前端,vue,项目架构)