从无到有搭建Vue.js+webpack前端开发环境(二)

上一篇讲完了如何用vue-cli初始化一个vue工程,本篇则主要讲解初始化后的工程包含了哪些文件。

第三阶段:理解与修改vue工程内文件

初始化完了vue工程你就会发现demo文件夹内已经有很多文件了。这些文件有的是配置文件不需要改动,而有的文件则是我们主要编写的对象。下面是工程文件的截图

vue工程内的文件

build文件夹

build文件夹内是负责这个工程的编译配置文件夹,属于不需要我们管的文件夹。这里做一个简单的说明。

build文件夹
  • build.js:这个文件是编译工程程序的入口。也就是说你在编译你刚写完的代码时,内部会执行 node build/build.js 。这个程序实际上就是将你的代码交给webpack处理。

  • check-versions.js:这个文件是用来检查当前node和npm的版本。

  • logo.png:这个仅仅是一个图标。

  • utils.js:这里面包含了编译工程时所需的工具,包括处理webpack的所用的loader之类的。

  • vue-loader.conf.js:这个是vue-loader的配置文件,在webpack处理.vue文件会用到这个。本质上也是运用utils.js中的loader处理。

  • webpack.base.conf.js等:这三个文件就是webpack的配置文件,在所有用到webpack的项目中都会包含这三个文件。它们分别表示基本、开发和生产的三种配置,并且可以允许开发和生产两种模式来打包文件。想进一步了解可以点这里

config文件夹

config文件夹就是对vue工程的基本配置文件夹。现在是默认配置,可以选择改动也可以不改。

config文件夹
  • dev.env.js和prod.env.js:这两个文件内容极少,主要是传出NODE_ENV这个标志来表明两种模式。

  • index.js:这个文件在前面的build文件夹内也多次用到,它就是主要配置文件,包含浏览器监听的主机名和接口、打包后生成的文件的位置等等。这些配置实际上也是交给webpack去处理的。我个人也都采用默认的配置。

src文件夹

src文件夹是最重要的文件夹,我们编写的代码主要都放在这个文件夹中。

src文件夹
  • assets:这个就是放一些静态资源的文件夹,比如放一些图片、音频之类的。在默认的状态下里面已经有一张logo图片了,我们也可以自己决定放什么内容。

  • components:组件文件夹。因为vue工程是前端模块化的工程,所以开发的时候必然少不了组件,而我们所用的组件都应该存放在这个文件夹中。我们也可以将这个文件夹重命名为view,组件放在这个文件夹的子目录中,这样我们可以区分一般的组件和显示页面的组件。

  • router:路由文件夹。这个文件夹内只包含一个文件index.js,这个就是用来组织各个组件之间的联系的。换句话来说,就是将URL映射到不同的组件上。这种映射规则也是有规范的,我们以后再说。

  • App.vue:工程的主组件,是所有组件的入口组件。它会根据根目录下的index.html渲染页面。我们可以在这个文件中添加一些全局样式之类的。

  • main.js:工程的总入口,这个文件目前引入了vue,router等。我们以后加入的iview、vuex、axios等前端开发库都会在这里引入。

static文件夹

这个文件夹内就是包含了静态资源,它与src文件夹中的assets不同的地方在于它不会被webpack处理,是真正的静态资源。

node_modules和其他文件

node_modules是所有node工程都有的一个文件,它是在运行npm install后自动创建的文件夹,里面包含了下载的开发所需要的各种依赖,这个我们一般是不管的。

.babelrc是babel的配置文件,babel是一个常用的前端开发库,它是将javascript的ES6以上版本的代码编译成浏览器可以识别的当前版本代码,这个我们也一般不管。

.DS_Store这个是Mac系统自带的隐藏文件,与工程无关。

.editorconfig是用来统一代码风格的工具,这个我们也不管。

.gitignore是与git工具有关的文件,在这个文件中列出来的文件名是不会上传到GitHub等版本控制网站,就比如.DS_Store这个文件。

.postcssrc.js是与css预处理有关的文件。

index.html就是html文件的模板,所有.vue文件转换成的html文件都会按照这个文件的格式渲染,例如前面的App.vue。

package-lock.json与package.json文件都是用来管理本地npm包的JSON文件也是运行npm命令的依据。比如说当我们运行npm run build这条命令时实际上就是对应scripts字段中的node build/build.js,这也是和之前解释的build文件夹吻合的。

README.md这个文件就是本工程的说明文件,不多做解释。

当我们了解了这些文件后就可以对它们做一些的修改,使它们变的符合我们的书写习惯(当然不修改也完全可以运行)。下一篇则重点讲一下我是怎么修改的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,783评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,360评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,942评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,507评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,324评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,299评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,685评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,358评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,652评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,704评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,465评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,318评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,711评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,991评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,265评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,661评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,864评论 2 335

推荐阅读更多精彩内容