本文基于vue版本2.9.6编写。通过npm命令对vue-cli脚手架安装,若未安装,可参考文章https://blog.csdn.net/Myuhua/article/details/106005344
(1)安装完成后默认vue脚手架目录结构
默认脚手架目录结构详细介绍。
|-- build //项目构建(webpack)相关代码
| |-- build.js //bulid.js是webpack的打包文件,通过配置package.json中的script来执行脚本。命令号npm run build即运行node build/build.js
| |-- check-versions.js //检查node跟npm版本号
| |-- logo.png
| |-- utils.js //相关构建工具
| |-- vue-loader.conf.js //根据当前的开发环境对webpack中的vue-loader进行配置
| |-- webpack.base.conf.js //webpack基础配置
| |-- webpack.dev.conf.js //webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js //webpack生产环境配置
|-- config //配置目录,包括端口号等。我们初学可以使用默认的
| |-- dev.env.js //开发环境变量配置
| |-- index.js //项目的一些配置变量。主要涉及dev与build的一些配置
| |-- prod.env.js //生产环境变量配置
| |-- test.env.js //测试脚本的配置
|-- node_modules //npm 加载的项目依赖模块
|-- src //开发代码的目录,基本上要做的事情都在这个目录里。
| |-- assets //放置一些图片,如logo等。
| | |-- logo.png
| |-- components //目录里面默认放了一个HelloWord.vue的组件,可以不用。
| | |-- HelloWorld.vue
| |-- router //vue的路由插件,在脚手架安装过程中如果选择安装路由就有这个包,如果没有选择就没有这个包。
| | |-- index.js
| |-- App.vue //项目入口文件,也可以直接将组件写这里,而不使用components 目录。不建议这么做,因为不便于项目维护。
| |-- main.js //项目的核心文件。
|-- static //静态资源目录,如图片、字体等。
| |-- .gitkeep //git无法追踪一个空的文件夹,当用户需要追踪(track)一个空的文件夹的时候,可以把一个称为.gitkeep的文件放在这些文件夹里。
|-- test //初始测试目录,可删除。
| |-- e2e //e2e测试
| | |-- custom-assertions
| | |-- elementCount.js
| | |-- specs
| | |-- test.js
| | |-- nightwatch.conf.js
| | |-- runner.js
| |-- unit //单元测试
| | |-- specs
| | |-- HelloWorld.spec.js
| | |-- .eslintrc
| | |-- jest.conf.js
| | |-- setup.js
|-- .babelrc //ES6语法编译配置
|-- .editorconfig //定义代码格式
|-- .eslintignore //eslint检测代码忽略文件(夹)
|-- .eslintrc.js //定义eslint的plugins,extends,rules
|-- .gitignore //git上传忽略文件配置
|-- .postcssrc.js //postcss配置文件
|-- index.html //访问的页面
|-- package.json //项目基本信息,包括依赖信息等 创建一个Node.js项目,意味着创建了一个模块,这个模块的描述文件成为package.json
|-- package-lock.json //锁定安装时的包的版本号,需要上传到git,保证依赖包一致。package-lock.json 是在 `npm install`时候生成一份文件,用来记录当前状态下实际安装的各个npm package的具体来源和版本号。
|-- README.md //项目说明,markdown文件
参考文章 https://blog.csdn.net/xiaoyangerbani/article/details/80735310
作者对默认脚手架目录中核心文件中代码做了详细的注释,请参照项目地址https://github.com/Myuhua/vue-learning.git ,vue-cli-v2.9.6目录。
(2)根据项目需求修改后的目录结构
本部分的目录修改是基于vue2.9.6版本,在原有包结构的基础上做了删除与添加操作。因作者独立开发,边开发边进行调试,故删除了项目的test模块及相关文件。build目录结构与脚手架默认同。config目录下删除了测试脚本配置文件。改动较大的为src目录,创建了api\common\directive\filters\store\utils\views等目录,注意,xxx.file是为了页面整洁对脚手架默认存在文件进行省略但不是删除,各目录作用介绍如下。
|-- build //项目构建(webpack)相关代码,与vue-cli初始化目录结构一致
|-- config //配置目录。
| |-- dev.env.js //开发环境变量
| |-- index.js //项目的一些配置变量。
| |-- prod.env.js //生产环境变量
|-- src
| |-- api //与后台交互模块文件夹
| | |-- system //自定义系统管理模块与后台交互代码放置处,根据自已的业务自定义即可
| |-- assets //放置需要经由 Webpack 处理的静态文件。如放置一些图片,如logo等。
| |-- common //通用资源文件夹(font,stylus,img)
| | |-- font //字体
| | |-- img //图片
| | |-- stylus // CSS 的预处理框架
| |-- components // 组件 主要是全局性的,或通用性很强的组件,具备良好的封装性一般不会涉及到具体的业务逻辑。如面包屑、顶部导航栏等
| |-- directive //存放自定义指令包。比如一些权限指令。
| |-- filters //自定义过滤器模块文件夹
| |-- router //路由
| |-- store //状态管理
| |-- utils //工具类
| |-- views //业务性的页面组件,基本不具备通用性。与路由一一对应(如 /src/views/auth/login.vue 对应着路由 /auth/login)
| | |-- auth //用户认证模块 可放置登录页,注销页面等
| | |-- error //错误页面
| | |-- system //这个目录名称根据模块功能自定义,比如作者system目录是需要写系统管理的一些内容,故取名为system。
| | |-- ... //下面的包创建根据个人系统需求创建就好了
| |-- App.vue //项目入口文件,也可以直接将组件写这里,而不使用components 目录。不建议这么做,因为不便于项目维护。
| |-- main.js //项目的核心文件。
|-- static // # 放置无需经由 Webpack 处理的静态文件,如图片、字体等。
|-- xxx.file //这部分表示与第一部分vue-cli初始化创建的文件一样,此处省略且不再做重复解释。
详细情况请参照项目地址https://github.com/Myuhua/vue-learning.git ,vue-remould-base-v.2.9.6目录。