你也许不知道的Vuejs - 定制开发项目模板

you-may-not-know-vuejs.png

by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-9.html
本文可全文转载,但需要保留原作者和出处。

有了前面几篇文章的铺垫,我相信我们回过头来再看看用 vue-cli 脚手架工具初始化的项目,就很好理解了。本篇将带着大家全面认识下用 vue-cli 脚手架工具初始化的项目,并会讲解如何定制化自己的项目模板。

初始化项目

先全局安装 vue-cli 脚手架工具:

npm install -g vue-cli

安装完成后,初始化基于 webpack 的项目模板,按照指示依次填写项目信息和选择需要的模块:

$ vue init webpack vue-pro-demo

? Project name vue-pro-demo
? Project description A Vue.js project
? Author yugasun <yuga_sun@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue-pro-demo".


# Installing project dependencies ...
# ========================
...

# Project initialization finished!
# ========================

To get started:

  cd vue-pro-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

执行完成后,当前目录下就会生成命名为 vue-pro-demo 的项目文件夹,结构如下:

.
├── README.md           # 项目说明文件
├── build               # 存放webpack 构建文件
├── config              # 存放webpack 配置文件
├── index.html          # 项目html模板文件
├── package.json        # 存储项目包依赖,以及项目配置信息
├── src                 # 开发文件夹,一般业务代码都在这里写
└── static              # 项目静态资源文件夹

4 directories, 4 files

对于 src 目录,我们在开发中也会根据文件的功能进行文件夹拆分,比如我个人比较喜欢的结构如下(仅供参考):

.
├── App.vue             # 项目如何组件
├── api                 # 存放接口相关文件
├── assets              # 存放项目资源文件,比如图片
├── components          # 存放通用组件
├── directive           # 存放全局自定义指令
├── filters             # 存放全局过滤器
├── main.js             # 项目入口文件
├── mock                # mock数据
├── router              # 路由
├── store               # 状态管理
├── styles              # 样式文件
├── utils               # 存放工具函数
└── views               # 存放视图类组件

规范的目录结构可以很好的规范化你的开发习惯,代码分工明确,便于维护,当你把锅甩给别人时,别人也不至于太难受,这个体会我想大家都懂的,脏话不宜说太多o(╯□╰)o。

定制开发项目模板

每个人在使用官方项目模板开发项目的时候,都或多或少的会修改一些默认的 webpack 配置,然后添加一些项目经常使用的的插件,也会根据自己需要在 src 目录下添加一些通用的文件夹目录,比如上面所说到的。

这就存在一个问题,每次我们在初始化项目的时候,都需要重复完成这几项操作,作为一个懒癌晚期患者的程序员,又怎么能容忍此类事情发生呢?所以定制化的需求蠢蠢欲动了。

下面就介绍下如何对官方的 webpack模板 进行二次开发。

二次开发

要做到这点,只需要三步:

  1. Fork官方源码 vuejs-templates/webpack
  2. 克隆到本地二次开发,添加自己想要的配置和插件,并 push 到 github
  3. 初始化项目时,使用我们自己的仓库就行

对于步骤1,会使用github的朋友应该都没问题,但是希望你不要问我,复制一个项目为什么叫 fork - 叉子,更不要看成 f**k。随便搜索下就明白了。

接下来,重点介绍下步骤2。

克隆项目vuejs-templates/webpack到我们的本地后,你会发现目录结构是这样的:

.
├── LICENSE
├── README.md
├── deploy-docs.sh
├── docs
├── meta.js
├── package-lock.json
├── package.json
├── scenarios
├── template
└── utils

这里我们只需要关心 template 目录就够了,因为这个目录存放的就是我们的项目模板。

打开 template/src/main.js 文件(项目入口文件),代码如下:

@@#if_eq build "standalone"@@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
@@/if_eq@@
import Vue from 'vue'
import App from './App'
@@#router@@
import router from './router'
@@/router@@

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  @@#router@@
  router,
  @@/router@@
  @@#if_eq build "runtime"@@
  render: h => h(App)
  @@/if_eq@@
  @@#if_eq build "standalone"@@
  components: { App },
  template: '<App/>'
  @@/if_eq@@
})

由于hexo对含有 handlebars 语法的演示代码编译有问题,所以将花括号进行了修改 { -> @, } -> @,请结合实际源代码进行阅读。

其中包含了很多 handlebars 的语法,这里主要用到了 if 条件判断语法,也很好理解。

好了,现在开始添加一个 vue-axios-plugin 模块,步骤如下:

  1. template/package.jsondependencies 字段中添加 vue-axios-plugin 依赖:
//....
  "dependencies": {
    "vue-axios-plugin": "@1.2.3",
    "vue": "@2.5.2"@@#router@@,
    "vue-router": "@3.0.1"@@/router@@
  },
//...

这里 @@#router@@ 是用来判断初始化的时候你是否选择使用 vue-router,如果不选择,就会根据判断移除 vue-router 依赖,很好理解吧。但是需要特别注意的就是,这里"vue": "@2.5.2" 末尾的那个逗号( , )也会被移除,所以你在添加自定义依赖后,一定要注意当此类情况发生时,保证初始化后,你项目的 package.json 文件格式是否合法有效。

  1. template/src/main.js 中添加插件注入代码:
@@#if_eq build "standalone"@@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
@@/if_eq@@
import Vue from 'vue'
import VueAxiosPlugin from 'vue-axios-plugin'
import App from './App'
@@#router@@
import router from './router'
@@/router@@

Vue.use(VueAxiosPlugin)

Vue.config.productionTip = false
// ...

本地测试使用

好了,这样我们的自定义组件已经添加完成了,那么在提交之前,我们还需要先测试下修改后的模板是否有效,运行命令进行初始化:

vue init path/to/webpack-template my-project

这里 vue init 的第一个参数 path/to/webpack-template 就是当前修改后的模板路径,之后还是重复交互式的配置过程,然后运行你的项目就行了。

不出意外地话,你的项目会很顺利的 npm run dev 跑起来,之后我们只需要 push 到我们自己的 github 仓库就行了。

使用

提交以后,项目同事都可以共享这份模板了,用的时候只需要运行以下命令:

vue init yugasun/webpack my-project

这里的 yugasun/webpack 参数就是告诉 vue-cli 在初始化的时候到用户 yugasun 的 github 仓库下载 webpack 项目模板。

之后你就可以愉快的编写输出你的 Hello world 了。

补充说明

当你你足够熟悉项目模板,你也可以对 webpack 配置进行更个性化的配置,或者添加 vue init 时的交互式命令。感兴趣的可以参看下我的个人模板 yugasun/webpack

总结

第二章有关项目配置篇,到这里就结束了,希望通过这一章的讲解,能够帮助大家了解到,一个完整的前端项目结构是如何实现的。从最基本的标签引入开始到工程化的项目架构,我尽量做到用最傻瓜式的方式来讲解,就是希望即使一个前端新手,也可以很轻松的实现自己工程化的项目配置。重点还是贵在多练习,多总结。

源码在此

专题目录

You-May-Not-Know-Vuejs

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

推荐阅读更多精彩内容