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

---

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

文件目录含义

-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： 包管理文件，配置启动脚本