Vue3项目搭建及文件结构

一. Vue3项目搭建

# 安装Vue CLI
npm install -g @vue/cli

# 通过Vue CLI创建项目：
vue create my-vue3-project

# 当问到你想要使用哪个版本的Vue时，选择Vue3
# 完成配置后，CLI会自动安装依赖并创建项目
# 最后，启动你的Vue3项目

cd my-vue3-project
npm run serve

# 启动一个开发服务器，在浏览器中访问它

二. Vue3初始化文件结构

my-vue3-project/
|-- public/
|   |-- index.html    // 主页面
|
|-- src/
|   |-- assets/    // 存放资源文件，如图片、样式等
|   |   |-- logo.png
|   |
|   |-- components/    // 存放Vue组件
|   |   |-- MyComponent.vue
|   |
|   |-- App.vue   // 应用的根组件
|   |-- main.js  // 入口JavaScript文件，用于引入Vue、安装插件、挂载根实例等
|
|-- .eslintrc.js    // ESLint配置文件，用于检查代码格式
|-- babel.config.js  // Babel配置文件，用于转译ES6+代码
|-- package.json  // 项目依赖配置和脚本定义
|-- README.md  // 项目说明文档
|-- vue.config.js  // vue cli 3+项目配置文件，如代理设置、开发服务器端口等。这只是一个基础的文件结构，根据项目的复杂性和规模，可以添加或调整目录结构

三. Vue3项目目录结构（以个人港口项目为例）

|--node_modules  // 依赖

|-- public/
|   |--cesium/       // 地图组件 

|   |--excel/          // 表格

|   |--external/      // 扩展

|   |--pdf/              // pdf文件

|   |--theme/         // 主题

|   |--themeRed/  // 红色主题

|   |--tinymce/      // 富文本编辑器

|   |--echarts-liquidfill.js     // 水球图表插件

|   |--echarts.min.js           // 图表插件
|
|-- src/
|   |-- assets/    // 存放资源文件，如图片、样式等
|   |   |-- file_con/

|   |   |-- icon/

|   |   |-- images/

|   |   |-- styles/

|   |   |-- video/
|   |

|   |-- common

|   |   |-- axios/              // 接口以及接口文件的集成

|   |   |-- commonJs/     // 公共JS

|   |   |-- constant/         // 常量

|   |   |-- controllers/      // 控制器 .vue文件

|   |   |-- mixin/              // 混入

|   |   |-- services/         // 服务器

|   |   |-- vuex/               // 状态管理

|   |   |   |-- actions.js

|   |   |   |-- getters.js

|   |   |   |-- mutations.js

|   |   |   |-- state.js

|   |   |   |-- store.js

|   |  
|   |-- components/    // 存放Vue组件
|   |   |-- 404/                  // 404页面

|   |   |-- index/               //  首页

|   |   |-- login/                //  登录页

|   |   |-- screen/             //  大屏
|   |

|   |-- router/              // 存放路由文件

|   |   |--index.js

|   |

|   |-- utils/              // 存放工具包

|   |   |-- imageUtil/

|   |   |   |-- image-dataurl.js

|   |   |   |-- image-process.js

|   |   |   |-- jpeg-encode-basic.js

|   |   |-- menuUtil.js    //  菜单工具包

|   |   |-- permUtil.js     //  菜单工具包

|   |   |-- storage.js      //   存储工具包

|   |   |-- util.js              //  通用工具包

|   |

|   |-- views/              // 存放页面

|   |

|   |-- App.vue   // 应用的根组件

|   |-- index.scss   // 页面整体样式
|   |-- main.js  // 入口JavaScript文件，用于引入Vue、安装插件、挂载根实例等
|
|-- .eslintrc.js    // ESLint配置文件，用于检查代码格式
|-- babel.config.js  // Babel配置文件，用于转译ES6+代码
|-- package.json  // 项目依赖配置和脚本定义
|-- README.md  // 项目说明文档
|-- vue.config.js  // vue cli 3+项目配置文件，如代理设置、开发服务器端口等。这只是一个基础的文件结构，根据项目的复杂性和规模，可以添加或调整目录结构