胖蔡说技术
随便扯扯

Vue工程结构

Vue cli脚手架是使用webpack构建的一个vue前端项目结构,项目分层较为清晰,组件化编程方式让前端项目的易读性大大增强,模块化设计让项目具有更高的可配置性。如下,介绍vue-cli的工程结构。

FileTree 目录

├── bin // node 命令行构建工具
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
| ├── assets //资源目录,这里的资源会被wabpack构建
│ ├── components // 全局UI组件
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自适应布局组合
│ ├── view // view界面
│ │ ├── charts //图表组件
│ │ ├── components //首页组件
│ │ ├── login //登录界面
│ │ ├── errorPages //错误界面
│ │ └── permission //权限测试界面
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 静态资源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json

目录/文件介绍如下:

目录/文件说明
build这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。
config配置目录,默认配置没有问题,所以我们也不用管
node_modules这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管
src我们的开发目录,基本上绝大多数工作都是在这里开展的
static资源目录,我们可以把一些图片啊,字体啊,放在这里。
test初始测试目录,没用,删除即可
.xxxx文件这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
index.html首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头
package.json项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
README.md不用管

赞(1) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Vue工程结构
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏