为了在vue项目中更好的管理项目,按功能划分src文件,按业务模块划分前端展示相关内容。
build | 构建相关,相关配置文件详情。 |
打包时,命令执行npm run build时运行,其中webpack.base.conf.js文件当中的 是入口路径。而 是出口。执行之后,会生成一个dist文件夹,刷新之后即可看见,将这个文件夹放置在服务器上即可。 |
|
webpack.base.conf.js | 如果嫌文件与文件直接的引用关系会很复制,可以使用alias,一般将alias只想src目录下,在使用相对路径找文件。设置如下: 使用: |
config |
配置相关 |
其中index.js文件中的port:8080和 1.必须使用驼峰法命名; 2.在一个函数当中,轻易不要使用全局变量,尽量使用let来定义,这个因为vue框架的原因; 3.在注释//后面一定要加一个空格,:后面也是; 4.代码段落对齐一定要仔细,否则也会报错; 5.定义工具函数时,内部的函数引用要this.function(); 6.==使用要换成===,但是要注意===是不能自动转换类型的。 npm run build后生成的dist文件访问本地static路径下的data.json数据有问题,需要修改productionSourceMap属性为false。 |
|
node_modules | |
其中是npm下载的依赖库,进入项目文件,执行:npm install vue-resource --save,执行后可在其下找到 vue-resource文件夹,在package.json中也能看到:"vue-resource":"^1.5.1",在入口函数main.js中引入: 其它,见《转:vue构建项目并添加依赖》。其中devDependencies是开发的依赖 |
|
src默认 | 源代码 |
assets | 主题、字体等静态资源,下级目录创建font和img(ps:https://tinypng.com/图片压缩地址) |
components | 全局公用组件,组件的编写看具体需求,编写时需满足:多处复用。太多的组件会导致页面逻辑复杂,页面级的组件建议放在各自的views文件下。 |
router | 路由,resolve异步加载(按需加载)。另:重定向与子路由。 |
App.vue | 入口页面 |
main.js | 入口文件、加载组件、初始化等。 |
src补充 | |
api | 所有请求 |
directive | 全局指令 |
filters |
全局filter |
icons | 项目所有svg icons |
lang | 国际化language |
mock | 项目mock模拟数据。使用mockjs生成随机模拟数据,实现前后端分离开发,详情。 |
store | 全局store管理(数据流管理),如登录信息,用户信息或一些全局个人偏好设置等用vuex管理更加方便。 |
styles | 全局样式 |
utils | 全局公用方法 |
vendor | 公用vendoe |
views | 所有页面组件,有vue-router引入,建议根据业务模块来划分views,并将views和api两个模块一一对应,以方便维护。 |
permission.js | 权限管理 |
static | 第三方不打包资源 |
.babelrc | babel-loader配置 |
.eslintrc.js | eslint配置项 |
.gitignore | git忽略项 |
.travis.yml | 自动化CI配置 |
favicon.ico | favicon图标 |
index.html | html模板,静态文件入口 |