vue組件如何被其他項(xiàng)目引用
自己寫的vue組件怎么才能讓其他人引用呢,或者是共用組件如何讓其他項(xiàng)目引用。本文就粗細(xì)的介紹下,如有疑問歡迎共同討論。在這里你能了解下如下知識(shí)點(diǎn):
1. 如何發(fā)布一個(gè)包到npmjs倉庫上
2.如何引用一個(gè)npm包,尤其是本地引用
3.vue組件的兩種引用方案
一、發(fā)布一個(gè)包到npm的步驟
在npmjs.org上注冊(cè)一個(gè)賬號(hào)
然后進(jìn)入命令提示窗口輸入:
- npm adduser: 進(jìn)入添加用戶
- Username your name: 設(shè)置用戶名
- Password your password: 設(shè)置密碼
- Email youremail:設(shè)置郵箱
登錄信息都保存在用戶目錄下的.npmrc文件中(以token的方式保存)
npm publish:發(fā)布包
執(zhí)行npm publish這前,請(qǐng)切換到需要發(fā)包的項(xiàng)目根目錄下。
npm unpublish --force:移除一個(gè)發(fā)布包(也可以移除指定版本的包)
注意:
- 發(fā)包前必須要在npmjs上注冊(cè)一個(gè)賬號(hào)
- 每次發(fā)布的時(shí)候都需要重新更新版本
- 也可以用npm logout登出用戶,用npm login登錄用戶
二、build方式引用vue組件
示例使用的是本地安裝一個(gè)npm包。因?yàn)榘寻l(fā)布到npmjs,然后再npm到項(xiàng)目中太過麻煩(由于我們要做來回調(diào)整和測(cè)試)。實(shí)現(xiàn)vue組件三步驟:
1. 配置組件(被引用的組件),可以省略
配置package.json,主要是增加main節(jié)點(diǎn)
"main": "index.js"
主是main的這個(gè)節(jié)點(diǎn),如果不配置,我們?cè)谄渌?xiàng)目中就不用import XX from '包名'來引用了,只能以包名作為起點(diǎn)來指定相對(duì)的路徑。
導(dǎo)出可供外部訪問的組件
import VueTree from './components/Hello' module.exports = { VueTree }
主要是導(dǎo)出可以讓外部訪問的組件,這里沒有直接導(dǎo)出main.js,是因?yàn)槲覀兯枰氖且恍┳咏M件,而根組件(因?yàn)樗嬖谥苯訏燧d到dom上的操作)。
編寫打包成為一個(gè)組件的腳本
var webpack = require('webpack') var path = require('path') var vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } var opt = { entry: { 'vue-tree-common': './src/comp.js' }, output: { path: resolve('dist'), filename: '[name].js', library: 'vue-tree-common', libraryTarget: 'commonjs2' //注意這里,打包的標(biāo)準(zhǔn) }, resolve: { extensions: ['.js', '.vue'], modules: [ resolve('src'), resolve('node_modules') ] }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('node_modules')] } ] } } var compiler = webpack(opt) compiler.run(function(err, state) { console.log(err) })
此種打包方式會(huì)將此組件的所有引用打包成一個(gè)文件,還是存在不合理的現(xiàn)象。
生成包 通過上述三個(gè)步驟的配置,只需要運(yùn)行打包成組件的腳本就可以生成發(fā)布包了。
2、本地如何引用npm包(安裝發(fā)布好的包)
用命令模式進(jìn)入開發(fā)項(xiàng)目文件夾,用命令安裝包。npm install --save 本地路徑 即可。
npm install --save D:\MyProject\vue2-tree
3、根據(jù)包名直接定位組件
<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> <VueTree></VueTree> </div> </template> <script> import Hello from './components/Hello' import {VueTree} from 'vue-tree/dist/vue-tree-common' //重點(diǎn) export default { name: 'app', components: { Hello, VueTree } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
此處我用的是import {VueTree} from 'vue-tree/dist/vue-tree-common這種方式引入的包,因?yàn)樵谠接玫膒ackage.json中main節(jié)點(diǎn)配置的index.js。
三、更為直接的引用vue組件
- 我們還需要npm本地安裝或者再現(xiàn)安裝;
- 按照如下圖所示引用:
四、總結(jié)
- vue的版本需要一致,如果不一致需要調(diào)整。
- vue的幾種打包方式:UMD、common、esm。
- vue分為部分和完成打包,區(qū)別就是template的支持。
- vue組件樣式存在圖片的引用時(shí),請(qǐng)使用單獨(dú)的樣式引入,因?yàn)榻M件的引入是不帶圖片的。
- “build方式引用vue組件”此方式可以把組件打成不同的包,方便不同規(guī)范引用。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮
這篇文章主要介紹了在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮的方法,文中還通過實(shí)例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識(shí),需要的朋友可以參考下2020-03-03vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue 使用formData方式向后臺(tái)發(fā)送數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue 使用formData方式向后臺(tái)發(fā)送數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue實(shí)現(xiàn)頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
這篇文章主要介紹了vue頁面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法
這篇文章主要介紹了UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12