国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自定義自己的vue-cli模板

付永剛 / 1813人閱讀

摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎的內容，但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個團隊，那么維護一個通用的模板，我認為是挺有必要的。

自定義自己的vue-cli模板

在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎的內容，但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個團隊，那么維護一個通用的模板，我認為是挺有必要的。
例如下面是我常用構建項目的目錄。

src
├─api  //接口
├─assets //圖片
├─components  //公用組件
├─css  //樣式 主要是scss
├─js //第三方以及工具類
├─page  //頁面
├─router //路由
└─store  //vuex

下面說下怎么自定義自己的vue-cli模板

fork一個自己的模板

從 https://github.com/vuejs-templates/webpack fork 一個庫，再提交自己的修改到【自己的分支】，因為我們大部分內容還是在這個基礎上做修改的。

關于vue-cli的源碼分析可以參考下這個文章從vue-cli源碼學習如何寫模板

vuejs-templates/webpack目錄如下，

│  .gitignore
│  circle.yml
│  deploy-docs.sh
│  LICENSE
│  meta.js   //該文件必須導出為一個對象, 用于定義模板的 meta 信息
│  package.json
│  README.md
│  test.sh
├─docs  // 一些介紹該模板一些模塊的文檔
└─template  //模板的內容


D:work
odetestwebpack>
meta.js

meta.js 主要是定義模板的一些配置, 目前可定義的字段如下:

prompts: 收集用戶自定義數據

filters: 根據條件過濾文件

completeMessage: 模板渲染完成后給予的提示信息, 支持 handlebars 的 mustaches 表達式

complete: 模板渲染完成后的回調函數, 優先于 completeMessage

helpers: 自定義的 Handlebars 輔助函數

prompts

有用過vue-cli的同學應該有看過下面的這個圖

看下 prompts的代碼

 "prompts": {
    "name": {  //項目名
      "type": "string",
      "required": true,
      "message": "Project name"  
    },
    "description": {  
      "type": "string",
      "required": false,
      "message": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "message": "Author"
    },
    "router": {   
      "type": "confirm",
      "message": "Install vue-router?"
    },
    ...   
 }

所有的用戶輸入完成之后, template 目錄下的所有文件將會用 Handlebars（了解相關的語法點這里） 進行渲染. 用戶輸入的數據會作為模板渲染時的使用數據,例如，在cmd確認使用router后，那么main.js就會import router，main.js中源碼：

{{#router}}
import router from "./router"{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//類似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是啟用lint后一些語法的檢查

{{/router}}

因為開發常用到vuex，我們可以加入vuex，修改meta.js

 "vuex":{
      "type": "confirm",
      "message": "Install vuex?"
    },

安裝過程中，就會詢問是否安裝vuex了

helper

上面的if_eq，還有源碼中的unless_eq是原本vue cli中注冊的那個輔助函數，在vue-cli中的generate.js：

# vue-cli/lib/generate.js

//...

// register handlebars helper
Handlebars.registerHelper("if_eq", function (a, b, opts) {
  return a === b
    ? opts.fn(this)
    : opts.inverse(this)
})

Handlebars.registerHelper("unless_eq", function (a, b, opts) {
  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})

類似的，你也可以自定義一些函數，方便你自己去處理一些數據，在meta.js中helpers對象中可以加入自己的方法，如源碼中就有注冊一個if_or的方法,你在文件中就可以用{{#if_or a b}}{{/if_or}}去使用

"helpers": {
    "if_or": function (v1, v2, options) {
      if (v1 || v2) {
        return options.fn(this);
      }

      return options.inverse(this);
    }
  },
filters

filters 是根據條件過濾文件，源碼:

 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/router/**/*": "router"  //例如上面的 router 為true的時候，就會加入這個目錄
  },

同樣，這里我可以加入自己的vuex目錄，當，vuex為true的時候，會導入這個目錄

 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/store/**/*": "vuex",  //加入自己的目錄
    "src/router/**/*": "router"
  },

然后在main.js引入vuex 

{{#vuex}}  //vuex為true的時候就會寫入這些
import Vuex from "vuex"{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
import store from  "./store/store"{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
{{/vuex}}

//store.js 文件是我寫vuex的入口

new Vue({
  el: "#app",
  {{#router}}
  router,
  {{/router}}
  {{#vuex}}
  store,
  {{/vuex}}
  {{#if_eq build "runtime"}}
  render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
  {{#if_eq build "standalone"}}
  template: "",
  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}

還有在template/package.json中也要加入vuex

 "dependencies": {
    "vue": "^2.5.2"{{#router}},
    "vue-router": "^3.0.1"{{/router}}{{#vuex}},
    "vuex": "^2.1.1"{{/vuex}}

  },

后續的話只需要將自己需要的文件跟文件夾，加入到template/src，例如,我這里加入一個詢問是否是移動端的，是移動端的話，會引入 lib-flexible.js 以及相關配置的scss文件

  "isMobile":{
        "type": "confirm",
        "message": "is Mobile project?"
    },

最后,提交到github自己的分支上，就可以使用了

vue init jamielhf/webpack#template1 name
github地址

https://github.com/jamielhf/webpack/tree/template1

參考：

vue-cli webpack的配置詳解
從vue-cli源碼學習如何寫模板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89895.html

相關文章

  • 自定義自己的vue-cli模板

    摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎的內容，但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個團隊，那么維護一個通用的模板，我認為是挺有必要的。 自定義自己的vue-cli模板 在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎的內容，但每次需要新建一個項目的時候就需要把之前項目的一些配置...

    Sleepy 評論0 收藏0

  • 走進Vue-cli源碼，自己動手搭建前端腳手架工具

    摘要：前言前段時間看了一些的源碼，收獲頗深。介紹是一款非常優秀的用于迅速構建基于的應用工具。不影響閱讀源碼，直接忽略掉。引入的包發送請求的工具。自定義工具用于詢問開發者。 前言 前段時間看了一些vue-cli的源碼，收獲頗深。本想找個時間更新一篇文章，但是最近事情比較多，沒有時間去整理這些東西。趁這兩天閑了下來，便整理了一下，然后跟大家分享一下。如果小伙伴們讀完之后，跟我一樣收獲很多的話，還...

    Apollo 評論0 收藏0

  • 深度定制團隊自己的 Vue template

    摘要：以下也將以進行展開說明。這個鍵值來自于在命令行界面與用戶交互的操作結果。鍵名對應的值為命令行交互中得到的數據。關于項目模板的開發涉及到的問題差不多就介紹完了，為自己或團隊開發一份專屬的吧原文深度定制團隊自己的 眾所周知，使用 vue-cli 可以快速初始化一個基于 Vue.js 的項目，官方提供了 webpack、pwa、browserify-simple 等常用 templates。...

    sixgo 評論0 收藏0

  • 深入認識vue-cli：能做的不僅僅是初始化vue工程

    摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。 相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

    AlienZHOU 評論0 收藏0

發表評論

0條評論

付永剛

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<