带后端同学看懂前端项目结构

目录

1. 拿到新项目如何启动

1. vue/react

2. 微信小程序/uniapp

1.微信小程序

2. uniapp

2. Vue

1. vue2

1. package.json

2. vue.config.js

3. .env

4. public

5. node_modules

6. dist

7. bin

8. src 

1.main.js

2.settings.js

3.App.vue

4.views

5.utils

6.store

7.router

8.plugins

9.layout

10.dirctive

11.components

12.assets

13.api

2. vue3

1. vite

2. public

3. 运行打包命令

4. .npmrc

3. React

1. umi 

1. src

1.models

4. uniapp

1. App.vue

2. main.js

3. manifest.json

4. pages.json

5. uni.scss

6. pages

7. static

8. upackage

5. 微信小程序

1. app.js

2. app.json

3. app.wxss

4. package.json

5. pages

6. components

---

1. 拿到新项目如何启动

1. vue/react

官方下载node

淘宝源下载node

启动之前需要安装nodejs，安装之前请先看项目的readme文件如有规定了node版本，请下载对应的版本，前端项目都依赖nodejs，找到项目根目录，也就是跟package.json同级下的文件夹位置，启动编辑器的终端或者启动cmd这两个路径都需要对应的package.json文件夹下，输入npm install进行安装，过程中安装过慢的话请更换npm镜像源更换为国内淘宝镜像源命令如下

npm config set registry https://registry.npmmirror.com

如项目中有 ".npmrc" 检查是否为淘宝镜像源

安装完成后，打开package.json文件找到scripts下的启动命令，输入npm run xxx即可

2. 微信小程序/uniapp

1.微信小程序

安装 “微信开发者工具” 打开微信公众平台登录，在设置中找到对应的appid复制，打开微信开发者工具，输入appid打开即可

发现有package.json文件需要先安装依赖包，运行这段命令

npm install

然后再微信开发者工具的头部选项卡选择工具->构建npm等待完成后，清除缓存重新编译即可

2. uniapp

发现有package.json文件的话同vue/react安装方法，在Hbuilder X中打开项目点击头部选项卡选择需要运行的平台即可

2. Vue

若依官网

1. vue2

ruoyi-ui 项目地址

vue2项目以若依的项目为例

1. package.json

这个文件是前端项目中最重要的文件，这里写了这个项目的名字，1版本号，作者，项目的脚本命令和项目中使用的依赖包，安装依赖包就是根据文件中记录的依赖包进行下载。

2. vue.config.js

这个文件是关于项目的打包，运行，等等基本配置都在这里

3. .env

这是就是环境变量了，在package.json中配置打包命令使用不同环境的变量

4. public

这个文件夹最牛逼See you tomorrow，在这个文件下的文件都不会被项目打包时编译进去，用于放一些静态资源，网页入口index.html也在这里面

5. node_modules

项目的依赖包都在node_modules下面，有的人发现我的package.json中没有那么多依赖怎么node_modules下面多出很多。

我以package.json中的js-cookie为例

当我们在node_modules下找到对应文件夹下的package.json这个文件就是这个依赖包的基本信息

这些依赖包也会对应的被下载，在node_modules中找一下gzip-js是可以找得到的，所以你看到项目中用了几个几十个依赖但是node_modules却多的一批就是这个原因

6. dist

是打包后生成的文件夹，上传项目时把文件夹里的文件丢到服务器就要了，如果项目是流水线管理的话，就很方便

7. bin

作者写的windows脚本方便运行项目等等

8. src 

整个项目的代码基本都在这下面

1.main.js

项目入口文件，等同于thinkphp项目中public->index.php文件

2.settings.js

是作者定义的全局配置文件

3.App.vue

是页面的入口文件

4.views

页面都在这下面

5.utils

封装的工具方法都在这里

6.store

就是vuex状态管理模式库，如果你看到项目中使用这种写法

对应的代码就在/store/modules/app.js里面

7.router

对应的就是项目的路由配置以及对应的页面文件路径

8.plugins

作者自己写的项目插件

9.layout

项目页面布局的文件，看到这个文件夹下有mixin这个东西他的工作原理就类似于js方法中的Object.assign()合并对象一样但是优先级是不高的，页面中有相同的方法mixin会被覆盖掉就像Object.assign(mixin,app.vue)这样，在组件中页面中引入都可以使用其中的方法

Object.assign 可以看MDN的讲解

10.dirctive

指令，在项目中如果使用的组件库是element-ui可以看到某些div标签中会有v-loading指令，这个v-loading指令也不是vue的是element-ui组件库里的，自己写的指令前面一定要带上“v-”例如“v-focus”

11.components

公共组件

12.assets

这个文件夹放一下静态资源，打包后资源文件名会被修改。

13.api

项目对应的接口方法都在这里

2. vue3

RuoYi-Vue3 项目地址

项目目录和vue2极其相似，vue2的知道后，vue3就很好看懂了，就介绍一些有变动的。

1. vite

这个目录不是使用创建项目原生vite项目自带的，而是作者自己写的，功能是把vite.config.js里的配部分置信息封装到了这里

看到引入的路径没有指明是哪个具体的文件，脚手架都会默认这个目录下的index.js或index.ts文件

2. public

在vue3中网页的入口在这里炸不到了？

他被放在了与src同级别的目录下

3. 运行打包命令

npm run build:prod

4. .npmrc

指定这个项目使用npm镜像源地址，要添加一定放在和package.json同级别目录下

3. React

基本同vue，如果使用的是umi会有所不同

1. umi 

react 18.0，umijs 4.3

1. src

1.models

模型，公共的方法，和接口处理都可以放在这里

调用方法

react 16，umi 2.13

调用方法不一样

其他的基本差不多，差别就是vue和react写法不同

4. uniapp

有的项目会有package.json，如果有的话也是需要npm install的

1. App.vue

页面入口文件

2. main.js

项目入口文件

3. manifest.json

多平台编译的配置文件

4. pages.json

路由，页面基本配置

5. uni.scss

全局样式

6. pages

页面都在这里面，配置路由时需要精确到页面文件

7. static

静态资源放置处

8. upackage

打包后，预览时的项目包都在这里

如有需求编译到小程序，需要使用打包后的包

5. 微信小程序

如果你使用的时uniapp编写代码并编译到小程序这块可以不用看

1. app.js

项目入口文件

2. app.json

微信api的权限，项目路由，项目基本配置都在这里

3. app.wxss

全局样式

4. package.json

使用第三方依赖包步骤

1. npm init
2. npm install “安装你需要的依赖包”

3. 

4. 工具里的 "构建 npm" 就可以使用第三方依赖包了

5. pages

页面都在这里

6. components

公共组件

介绍完了所有前端项目的基本结构了，每个项目的结构可能有所不同。

推荐一下我写的插件库@zzcpt/zztool