Vue深入之js檔案全域性宣告和基礎元件的全域性註冊

2021-08-20 07:13:48 字數 1175 閱讀 2527

前言:有些時候,部分基礎的js和vue元件會在不同的頁面進行使用,但是每次只是用很少一部分,甚至只用一次,最後導致每個頁面裡面都會有很長一串的js或者基礎元件的長列表,尤其在基礎元件很多的時候,會讓你頭痛萬分。下面將介紹如何進行全域性註冊(都是基於vue-cli)

1.js檔案全域性註冊

例如:把乙個名為store.js的檔案放在和main.js的同級目錄下進行操作,先引入,再註冊

其他頁面是使用方法:this.$store

2.vue基礎元件全域性註冊

例如:在components的檔案下建立乙個base資料夾存放需要全域性註冊的基本元件(baseinput.vue  baseselect.vue)

在main.js檔案新增以下**:

import upperfirst from 'lodash/upperfirst'          

import camelcase from 'lodash/camelcase' //因為在元件名字處理的時候會用到lodash的部分,所以引入

const requirecomponent = require.context(

'./components/base', //當前基礎元件相對與main.js的相對位置

false, //是否查詢子目錄

/base[a-z]\w+\.(vue|js)$/ //匹配基礎元件的名字的正則,如果base裡面的元件都是基礎元件,那麼只需要將所有包含即可,這裡因為我的元件都是base開頭的

成功:

深入解析JS變數宣告和函式宣告提公升

很多時候,在直覺上,我們都會認為js 在執行時都是自上而下一行一行執行的,但是實際上,有一種情況會導致這個假設是錯誤的。a 2 var a console.log a 按照傳統眼光,console.log a 輸出的應該是undefined,因為var a在a 2之後。但是,輸出的是2。再看第二段 ...

Vue之v model和全域性元件

v model可以實現資料的雙向繫結 資料兩端都會發生變化 用在普通的html標籤上面 下面這種寫法可以達到和上面相同的效果 使用 v bind 來動態傳遞 prop 在寫完後可以看到當在輸入框輸入資訊時可以在上面及時得到結果 v model在自定義元件上的使用,如何把資料從元件傳到外面,如何把外面...

vue 配置全域性可呼叫的檔案 js 方法

案例1 建立乙個config.js檔案並寫到public資料夾下的index.html檔案中的頭部中 base url config.js script base url 代表 public資料夾下 base url data 表示public data 資料夾下 base url data gua...