• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程03:项目目录结构介绍

    vue开发教程03:项目目录结构介绍

    作者: 分类:vue开发 点击: 86 次
    wordpress CMS主题:ssmay主题

      前一章节中我们通过vue创建了一个新的项目,本章我们来对这个新项目的目录结构做一个简单的介绍。如果创建的是webpack项目,它包含有:build、config、node-modules、src、static几个目录,如果创建的是webpack-simple项目,它只包含有:src、node-modules目录。

      一:总体简介:

      build目录:webpack相关配置文件(打包项目时用到的文件);
      config目录:vue基本配置文件目录(配置监听端口、打包输出等);
      node-modules目录:vue的依赖包目录;
      src目录:项目核心源文件目录(我们所写的代码都放在这个目录下);
      static目录:存放静态资源目录。

      vue开发教程03:项目目录结构介绍

      二:build目录文件介绍:

      build目录存放的是webpack的相关配置文件,它包含有如下配置文件:

      build.js:生产环境构建文件;
      chedk-versions.js:版本检查(node,npm);
      utils.js:构建相关工具;
      vue-loader.conf.js:CSS加载器配置;
      webpack.base.conf.js:webpack基础配置;
      webpack.dev.conf.js:webpack开发环境配置;
      webpack.prod.conf.js:webpack生产环境配置;
      dev-client.js:开发服务器的热重载(用于实现页面的自动刷新);
      dev-server.js:构建本地服务器(npm run dev 即运行它);

      三:config目录:

      config目录存放的是vue的配置文件,包含有如下这些文件:

      dev.env.js:项目开发环境配置文件;
      index.js:项目主要配置(包括监听端口、打包路径等);
      prod.env.js:项目生产环境配置;

      四:src目录:

      src目录存放的是我们开发项目的源代码文件,它们都是项目的核心文件。

      assets目录:存放项目静态资源文件(如:css、图片等);
      components目录:项目公共组件目录;
      router目录:项目路由配置文件目录;
      App.vue:项目根组件文件;
      main.js:项目入口文件;

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809196941.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.