当前位置 博文首页 > 文章内容

    vue项目目录结构详解

    作者: 栏目:未分类 时间:2020-08-22 9:01:44

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next、scss 等最新语言特性。项目包含:

    基础库: vue.js、vue-router、vuex、whatwg-fetch
    编译/打包工具:webpack、babel、node-sass
    单元测试工具:karma、mocha、sinon-chai
    本地服务器:express
    目录结构

    ├── README.md            项目介绍

    ├── index.html           入口页面

    ├── build              构建脚本目录

    │  ├── build-server.js         运行本地构建服务器,可以访问构建后的页面

    │  ├── build.js            生产环境构建脚本

    │  ├── dev-client.js          开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新

    │  ├── dev-server.js          运行本地开发服务器

    │  ├── utils.js            构建相关工具方法

    │  ├── webpack.base.conf.js      wabpack基础配置

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

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

    ├── config             项目配置

    │  ├── dev.env.js           开发环境变量

    │  ├── index.js            项目配置文件

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

    │  └── test.env.js           测试环境变量

    ├── mock              mock数据目录

    │  └── hello.js

    ├── package.json          npm包配置文件,里面定义了项目的npm脚本,依赖包等信息

    ├── src               源码目录 

    │  ├── main.js             入口js文件

    │  ├── app.vue             根组件

    │  ├── components           公共组件目录

    │  │  └── title.vue

    │  ├── assets             资源目录,这里的资源会被wabpack构建

    │  │  └── images

    │  │    └── logo.png

    │  ├── routes             前端路由

    │  │  └── index.js

    │  ├── store              应用级数据(state)

    │  │  └── index.js

    │  └── views              页面目录

    │    ├── hello.vue

    │    └── notfound.vue

    ├── static             纯静态资源,不会被wabpack构建。

    └── test              测试文件目录(unit&e2e)

      └── unit              单元测试

        ├── index.js            入口脚本

        ├── karma.conf.js          karma配置文件

        └── specs              单测case目录

          └── Hello.spec.js