Vue基础篇

前端开发流程规范

目录构建规范

1. src 源代码开发目录，也是我们编程人员主要的操作目录，我们大部分代码都在里面
2. config 配置目录 webpack/gulp的配置目录
3. script 脚本命令启动目录
   • env.js 项目的环境配置文件：
   • dev.js 开发环境
   • prod.js 生产环境
4. public/static 静态资源开发目录 - 不会经过webpack编译的目录
5. assets 静态资源开发目录 - 会经过webpack编译的目录
   • img
     • <4k 图片可以转换为base64

     • 4K 只会经过webpack压缩、编译一下

6. components 组件
   • 组件是一个 html css js img 等的一个聚合体
7. lib 插件 比如jq
8. pages 页面
   • home首页
   • category 分类
   • list 列表
   • login
   • register
9. routes 路由配置
10. utils 封装模块
11. doc
    • 后端接口文档
    • 产品经理的文案
    • 项目的开发流程规范
12. test
    • 测试目录
    • 测试你的代码质量

前端环境

同一个内容处于不同的空间
比如: 兵哥在教室、办公室、金沙湖、家【 杭州 】、老家
我们在不同的地方行为表现可能不一样
我们希望项目无论在什么情况下都是一样的

1. 生产环境 - 代码经过打包、压缩、编译
2. 开发环境 - 代码没有经过打包、压缩
3. 测试环境
4. 预上线环境
5. 上线环境
6. 其他环境

base64

• 前端性能优化的方案
• 好处： 可以减少一次ajax请求
• 针对： 大小是小于4K的图片

OOCSS命名规范

1. 案例： Bootstrap

js命名方式

1. 变量
   • num
   • nickName
   • nick_name
2. 常量
   • NUM
   • GET_DATA
3. 函数名
   • fn
   • checkNum
4. 类
   • Person
   • BannerList