Vue前端架构笔记

1. ./public/index.html -- 主页, 项目入口, 灵活运用, ps:可以自定义HTML标签META和TITLE,ICON的地方, 也直接引用 js 操作类库(调用时需要声明语法免检);
2. ./src/router/index.js -- 路由配置文件: 路由调用页面声明, 在头部导入vue-router, 页面在路由中声明的名字采用大驼峰命名法(文件名用小写的,在路由中声明的名字用首字母大写形式,见下图示例), 页面路径, 页面参数, 页面权限.
3. main.js -- 入口文件: 1.组件和依赖项引用; 2.全局变量声明; 3.路由拦截事件 (实现身份和权限验证);
4. App.vue -- 跟组件: 页面框架布局, 使用栅格化布局容器包含页面富内容的形式, 使用v-if检查布局显示条件, <router-view /> 路由视图作为主视图占C位调用, ps: 1.移动端的物理返回键监听可以在这个页面实现;
5. 视图文件默认放在 ./src/views 文件名用小写单词.vue扩展名结尾, 多个单词组合文件名中间以 '-' 号分隔(如:home-page.vue)
6. 主要操作页面, 需要在页面引用多个自定义组件的时候在./src/views创建目录, 目录名以小写单词加 '-' 号分隔, 目录下创建index.vue作为入口文件, 为自定义的组件创建components文件夹作为页面所属组件目录
7. 在资源目录./assets下创建公共样式文件site.css作为常用样式表
8. 纯静态引用资源放在./static文件夹下, 每个引用以所引用的项目名创建文件夹区分
9. 数据接口文件放在./src/units目录下创建index.js文件, 数据接口文件中定义axios组件的get,post,put,delete通用方法, 对api接口的自定义请求方法以api开头接数据接口的大驼峰命名法
10. 应用数据文件放在./src/store目录下创建index.js文件, 应用数据文件中定义sp(session process)开头接数据操作方法的大驼峰命名法

猜你喜欢

转载自www.cnblogs.com/xuhaifeng/p/12666247.html