vue-cli创建的项目的目录结构及说明

本文详细介绍了前端项目的常见文件夹及文件结构,包括构建配置、环境变量设置、源码组织方式等内容,适合初学者快速理解现代前端项目的搭建流程。

一、

├── build              // 项目构建(webpack)相关代码             记忆:(够贱)    9个

│ ├── build.js       // 生产环境构建代码

│ ├── check-versions.js // 检查node&npm等版本

│ ├── dev-client.js       // 热加载相关

│ ├── dev-server.js        // 构建本地服务器

│ ├── utils.js          // 构建配置公用工具

│ ├── vue-loader.conf.js // vue加载器

│ ├── webpack.base.conf.js // webpack基础环境配置

│ ├── webpack.dev.conf.js //  webpack开发环境配置

│ └── webpack.prod.conf.js // webpack生产环境配置



二、
├── config// 项目开发环境配置相关代码                        记忆: (环配)    3个   

│ ├── dev.env.js  // 开发环境变量(看词明意)

│ ├── index.js //项目一些配置变量

│ └── prod.env.js // 生产环境变量



三、
├──node_modules// 项目依赖的模块                         记忆: (依赖)    *个     




四、

├── src// 源码目录                 5

1
│ ├──  assets// 资源目录 

│ │ └── logo.png

2    
│ ├── components// vue公共组件

│ │ └── Hello.vue

3
│ ├──router// 前端路由

│ │ └── index.js// 路由配置文件

4
│ ├── App.vue// 页面入口文件

5
│ └── main.js// 程序入口文件



五、

└── static// 静态文件,比如一些图片,json数据等

│ ├── .gitkeep
    


剩余、
├── .babelrc// ES6语法编译配置

├── .editorconfig// 定义代码格式

├── .gitignore// git上传需要忽略的文件格式

├── index.html// 入口页面

├── package.json// 项目基本信息

├── README.md// 项目说明


附录、
一般情况下:
ESlint  es6的代码风格检查器  y
AirBNB  默认
Karma + Mocha No

e2e   No

转载于:https://www.cnblogs.com/liaojie970/p/7435345.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值