一、Vue项目目录说明
1. 项目目录展示及说明
- 使用tree 命令生成的目录结构,删减掉了node_modules中的内容(主要为依赖包,并且内容太长)
- views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。
│ .babelrc # 配置babel的配置文件,可以根据自己需求配置babel,一般默认
│ .DS_Store # mac中产生的隐藏文件,不需要管理
│ .editorconfig # 编辑器配置文件,可以按需自己配置,一般默认
│ .eslintignore # eslint忽略文件,可以按需自己配置,一般默认
│ .eslintrc.js # eslint配置文件,可以按需自己配置,一般默认
│ .gitignore # git忽略文件,可以按需自己配置
│ .postcssrc.js # postcss配置文件,可以按需自己配置,一般默认
│ index.html # 首页入口
│ package-lock.json # 定义了开发时所使用的模块依赖的版本,使用npm install时使用该文件
│ package.json # 定义了这个项目所需要的各种模块,以及项目的配置信息
│ README.md # 项目简介,说明文档
│
├─.git # git仓库相关内容,自动生成不需要处理
│
├─.idea # 编辑器自动生成不需要处理
│
├─build # webpack配置相关(开发环境、生产环境),一般使用默认,可修改配置
│ build.js
│ check-versions.js
│ logo.png
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
│
├─config # 配置文件(路径、端口、代理等),一般使用默认,可修改配置
│ dev.env.js
│ index.js
│ prod.env.js
│
├─dist # 生产出来的目录文件,包含一个index.html文件和一个static文件夹用于部署
│ │ index.html
│ │
│ └─static
│
├─node_modules # 所安装的依赖包
├─src # 源文件
│ │ App.vue # 主组件,所有页面都是在App.vue下进行切换的
│ │ main.js # 入口文件,初始化vue实例并使用需要的插件
│ │
│ ├─assets
│ │ │ logo.png
│ │ │
│ │ └─css
│ │ └─ app.css
│ │
│ ├─components # 开发的组件
│ │ ButtonBarItem.vue
│ │
│ ├─views# 开发的页面存放
│ │ │─ car
│ │ │ │ CarEditPage.vue
│ │ │ └─ CarListPage.vue
│ │ └─ bus
│ │ │ BusEditPage.vue
│ │ └─ BusListPage.vue
│ │
│ └─router # 路由配置
│ index.js
│
└─static #静态资源,图片、字体可以放在这里
.gitkeep
资料:
* babel资料
* vue-cli的webpack模板项目配置文件分析
* eslint资料
* webpack
* package.json