Android程序员初探Vue(二):项目结构

系列文章
Android程序员初探Vue(一):环境搭建(Vue2.0)
Android程序员初探Vue(二):项目结构
Android程序员初探Vue(三):从开源项目看Vue架构

总体框架

作为 Android 开发者,我们最开始学习 Android 时第一件事就是分析 IDE 自动生成的 project 项目结构,掌握每一个文件是做什么用的,学习 Vue 也是如此。

用 Sublime 打开我们刚才创建的项目 my-project 后,Sublime 左侧栏展示出的项目结构跟 Android Studio 生成的很相近。

借用一张网上的图片来具体解释下工程里各个文件的含义:

vue-cli项目总体结构

Android 与 vue 工程对比

我们写 Android 时基本都只要操作 src 目录,同理 Vue 也是一样,但是很少的时候我们也要去修改根目录下面的 build.gradle 文件,对应着 vue 里面的 index.html,其他自动生成的文件或者文件夹看名字也基本能明白。

Android 与 vue 工程对比

我们再来详细对比下:

node_modules vs External Libraries

先看下 node_modules 的截图:


node_modules

这个目录下存放的是该 project 下所有的依赖包,就跟 Android Studio 的 External Libraries 一样。

package.json vs build.gradle

package.json 是一个包管理的配置文件,跟 build.gradle 一样,里面的参数是整个项目的配置。


package.json

其中 scripts 对象里面的 dev:指开发运行(npm run dev),build 指的是正式运行(npm run build),对应于 Android 打包 apk 时的 debug 和 release。

dependencies 字段指定了项目运行时所依赖的模块,devDependencies 字段指定了项目开发时所依赖的模块。在命令行中运行 npm install 命令,会自动安装 dependenciesdevDependencies 字段中的模块。
例如:
npm install vuex
运行完这个指令后, dependenciesdevDependencies 字段中会多出一个 vuex 的字段。

想进一步了解 package.json 的可参考:https://docs.npmjs.com/files/package.json

index.html

其实 index.html 与 Android 根目录下面的 build.gradle 对比并不对,只是它们在 project 里面的位置很相近而已,index.html 是项目主页。

index.html

从图中可以看出,index.html 的文件很简单。
最开始看会有疑问:<div id="app"> ?是什么鬼?为什么 body 里面就一行而我们运行项目却出来的很多图片和文字?

其实这个 id 里面的 app 对应 main.js 声明的new Vue({el: '#app'})
html 标签上面的字段都是小写,不能使用驼峰命名法,vue 自动将 App.vue 转换为 app 并且省去了后缀 .vue。
vue实例将 App.vue 挂载到 id=app 的节点上,从而实现将 App.vue 里的内容渲染在 index.html 的 <div id="app"></div> 里面。
这个很像我们在写 Android xml 布局的 <include> 标签。

但是网上大部分项目都是这么写的

  <body>
    <div id="app">
        <router-view></router-view>
    </div>
  </body>

项目了却怎么也找不到 routerView.vue。这个是 Vue 的一个路由插件,查看 main.js

main.js

通过红色圈的三部把 router 插件引入进去的。
<router-view></router-view> 这里就跳转到了 src/rounter/router.js 里面,这个 router.js
里面就控制了整个项目的路由。

rounter 这个插件有点像 Android 里面的 Intent。

xx.vue

.vue 文件是 vue 特有的文件,也可以叫做组件,它是由前端三大块组成:HTML+JS+CSS,如下所示


App.vue

但是如果页面很复杂,如果 CSS 代码太长了,也可以把它单独抽取出来,以文件的方式引用,还可以在其他地方复用,如下所示:

<style lang="stylus" rel="stylesheet/stylus">
  @import "food.styl";
</style>

注意几点

  • 我们只需要关注:

    • src
    • index.html
    • xx.vue
  • html 标签不能使用驼峰命名法,vue 会自动将驼峰转为小写:App.vue --> app,MyApp.vue --> my-app。

  • index.html 是项目主页,也是项目主入口,里面代码很少。

END

传送门:

Android程序员初探Vue(三):从开源项目看Vue架构

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