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+项目配置文件，如代理设置、开发服务器端口等。这只是一个基础的文件结构，根据项目的复杂性和规模，可以添加或调整目录结构