本文最后更新于 1641 天前,其中的信息可能已经有所发展或是发生改变。
目录结构
|____build
| |____build.js
| |____webpack.dev.conf.js
| |____check-versions.js
| |____webpack.prod.conf.js
| |____logo.png
| |____webpack.base.conf.js
| |____utils.js
| |____vue-loader.conf.js
|____config
| |____dev.env.js
| |____index.js
| |____prod.env.js
|____node_modules
| |____@types
| |____.DS_Store
| |____accepts
| |____@babel
| |____...
| |____...
| |____...
| | |____.DS_Store
|____src
| |____App.vue
| |____main.js
| |____components
| | |____HelloWorld.vue
| |____assets
| | |____logo.png
| |____router
| | |____index.js
|____static
| |____.gitkeep
|____.babelrc
|____.editorconfig
|____.eslintignore
|____.eslintrc.js
|____.gitignore
|____.postcssrc.js
|____index.html
|____LICENSE
|____package-lock.json
|____package.json
|____README.md
最外层文件
README.md //项目的说明文件
package.json // 第三方模块的依赖
package-lock.json // 锁文件,可以确定安装依赖包的版本,保持团队编程的统一
LICENSE // 开源协议的说明
index.html // 默认项目的首页模板文件
.postcssrc.js // postcss的一个配置项
.gitignore // git 文件筛选提交,对一些不想提交到仓库的文件可以进行筛选不提交到仓库
.eslintrc.js // 代码规范检测
.eslintignore // 这里面的配置的文件不受 `eslintrc` 语法的监测
.editorconfig // 帮我们配置了一些编辑器里面的语法
// 例如:点击 tab 是两个空格的缩进
.babelrc // 语法转换(vue单文件组件的语法,通过babel转成浏览器能够编译执行的代码)
目录文件
static // 静态资源(静态图片、模拟的 json 数据等等...)
node_modules // 依赖的 node 第三方的包
src // 整个项目的源代码
src/main.js // 整个项目的入口文件
src/app.vue // 最原始的根组件
src/router/index.js // 项目中的路由
src/components // 项目要用到的小组件
src/assets // 项目要用到的图片资源
config // 项目的配置文件
config/index.js // 基础配置信息
config/dev.env.js // 开发环境配置信息
config/prod.env.js // 线上环境配置信息
build // 项目打包的 webpack 相关的内容
// webpack打包的额外配置
// vue cli 自动构建好的集合,一般不需要修改
build/webpack.base.conf.js // 基础的 webpack 配置项
build/webpack.dev.conf.js // 开发环境中的 webpack 配置项
build/webpack.prod.conf.js // 线上环境的 webpack 配置项
build/webpack.prod.conf.js // 打包的额外配置
说明
我么要做的基本是在 src 源代码目录下进行我们业务代码的开发