阅读 394

前端开发之完整的项目结构及含义解释

前端开发之完整的项目结构及含义解释


这是一个比较完整的一个前端项目框架。后续将持续更新中~~~~,有问题敬请指教。

一个通用的项目目录结构图

文件目录含义

-node_modules		#项目依赖
-public 			#存放公共的静态资源,一般可以放第三方静态
-src
  |__api           	#系统的接口地址
  |__assets        	#静态资源,图片,字体,样式
  |__components		#封装的公共组件
           |__base  #基础公共组件
  |__libs           #常用工具函数,项目开发时 urls 配置
  |__mock           #开发时使用的 mock 数据及方法
  |__router        	#路由配置
  |__store        	#vuex 仓库
  |__types        	#放类型限定文件
  |__views			#页面视图组件
       |__common    #项目公共组件 如 Error.vue,Login.vue
       |__home      #项目首页
  |__env            # 通用的环境变量,在所有的模式中都会被加载
  |__env.development    # 开发的环境变量,在yarn server 模式下会被加载 会覆盖env中同名的通用变量
  |__env.demonstration  # 测试的环境变量,在yarn build:dem 模式下会被加载 会覆盖env中同名的通用变量
  |__env.demonstration  # 生产的环境变量,在yarn build:pro 模式下会被加载 会覆盖env中同名的通用变量
复制代码

public 和 assets 的区别

1.public文件夹中的文件会原封不动的放到dist文件夹中。 2.assets目录中的文件,会被合并到一个文件中,然后进行压缩。多用来存放业务级的js、css等,如一些全局的scss样式文件、全局的工具类js文件等。

配置文件含义

.vscode:编辑器的配置文件,可以为该项目单独配置格式
.browserslistrc: 浏览器兼容性配置文件
.editorconfig: 编辑器格式配置文件
.env: 通用的环境变量,在所有的模式中都会被加载
.env.development: 开发的环境变量,在yarn server 模式下会被加载 会覆盖env中同名的通用
.env.demonstration: 测试的环境变量,在yarn build:dem 模式下会被加载 会覆盖env中同名的通
.env.production: 生产的环境变量,在yarn build:pro 模式下会被加载 会覆盖env中同名的通用变量
.eslintignore:忽略哪些文件的eslint语法检查
.eslintrc.js: eslint代码检查配置文件
.gittignore: git的上传忽略文件
.prettierrc : prettier格式化配置文件
.stylelintrc.json: CSS格式配置文件
babel.config.js: babel配置文件
postcss.config.js: postcss编译配置文件
tsconfig.json: 当前项目ts配置文件
tslint.json: ts格式化检查配置文件
vue.config.js: webpack配置文件,配置跨域、文件解析、优化打包等
package.json: 包管理文件,配置启动脚本

文章分类
前端