Vue项目构建与管理--脚手架工程目录篇

Vue.js is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!

通过脚手架构建出来的目录结构比较简单,基本的目录结构比较清晰.

image
  • build -- 项目构建的相关代码
  • config -- 配置目录,包括端口、环境等的配置
  • src -- 开发的主要目录
    • asset : 放置一些图片
    • components :主要放置一些常用的组件文件
    • App.vue:项目的入口文件(顶层父组件)
    • main.js:项目的核心文件(vue的实例初始化)
    • router: 项目页面路由视图
  • README.md:markdown的说明文档
  • package.json:npm的配置文件

build

  • build.js

build文件夹里有一个 build.js ,是我们完成项目之后需要运行的, 可以将我们的项目文件打包成 静态文件,存放在项目根目录的 dist 文件夹中(现在目录里还没有这个文件夹,build的时候会自动生成),当然你可以自己设置路径,是在。。应该是在 config 文件夹中的 index.js 中改,可以指定主页,默认是 index.html。

  • check-versions.js

主要是检查一些所依赖的工具的版本是否适用,如nodejs、npm,若版本太低则会提示出来。

  • dev-client.js

应该是本地客户端开发中有关热更新的吧

  • dev-server.js

是一个用作服务器端的东西,涵盖了express和它的一些模块,为了在本地服务器上把我们的项目跑起来的一个文件,引入了反向代理的模块,我们可以用来发起跨域请求。

  • utils.js

里面引入了一些css-loader,以便于解析各种格式的css,如 less,sass

  • vue-loader.conf.js

它把上面的 utils.js 引入了,应该是用于切换 开发模式和 生产模式的文件,以便于用不同模式来解析css

  • webpack.base.conf.js

webpack主要配置选项

  • webpack.dev.conf.js

开发环境下webpack主要配置选项

  • webpack.prod.conf.js

生产环境下webpack主要配置选项

src

  • App.vue

是我们的主组件,也是我们所有组件和路由的出口,之后他会被渲染到我们项目根目录的 index.html 中显示出来,我们可以在这里写一些适合全局的css样式,比如说 css reset,字号,字体什么的。

  • assets

是我们放一些静态图片资源的目录,虽然我没有放图片在里面。

  • components

这里存放的是我们写的各种组件,各个组件联系在一起组成一个完整的项目

  • router

我们定义路由的地方,虽然也可以直接在 main.js 中直接定义,但是分开的话结构更加清晰,路由的定义我们下次再说~

  • main.js

入口文件,引入了 vue模块 和 app.vue 组件 以及 路由router,我们需要在全局使用的一些东西也可以定义在这里面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,843评论 0 16
  • 目录 一、项目结构的核心思想 二、项目目录结构 三、资源路径编译规则 四、index.html 五、build目录...
    科研者阅读 11,492评论 0 40
  • 低着头 踢着路边的顽石 没有向谁告别 有点感伤 抬头呆呆地望了会太阳 然后我出发 背上红色的双肩包 装有一段青春的...
    时间的尘埃里阅读 550评论 14 23
  • 姓名:周如川 公司:绍兴市柯桥恰合纺织有限公司 【日精进打卡第12天】 【知~勤学】 1、《六项精进》大纲5遍,共...
    川流不西阅读 194评论 0 0
  • 缺少时间和金钱,表面上看是资源问题,实际上是心理原因。今天来介绍一本关于《稀缺》的书,来自「美」塞德希尔.穆来纳森...
    翠霞_0256阅读 164评论 1 1