摘要:網上看了一些文章,一般都是把封裝好的格式的文件發布到,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。本文以封裝一個分頁組件為例,把它生成目標文件,生成壓縮包測試,并發布到。修改輸出文件到下,生成文件名為。
網上看了一些文章,一般都是把封裝好的.vue格式的文件發布到npm,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。
本文以封裝一個分頁組件為例,把它build生成目標js文件,pack生成壓縮包測試,并發布到npm。
項目初始化
封裝vue的插件用webpack-simple很合適,vue init webpack-simple vue-gitment 此命令創建我們的項目的目錄,創建文件夾和文件,最后結構是這樣的
lib目錄是我們的插件目錄,其他的默認就好。
組件內容
Pagination.vue 的內容如下:
index.js 用來安裝組件,內容如下:
import Pagination from "./Pagination.vue" const pagination={ install:function (Vue) { Vue.component("vPagination",Pagination) } }; // 這里的判斷很重要 if (typeof window !== "undefined" && window.Vue) { window.Vue.use(pagination) } export default pagination
配置文件
package.json 內容如下:
{ "name": "pagination", "description": "A Vue.js project", "version": "1.0.0", "author": "author", "license": "MIT", "private": false, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "directories": { "dist": "dist" }, "dependencies": { "vue": "^2.4.4" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
webpack.config.js 內容如下:
module.exports = { entry: "./src/lib/index.js", output: { path: path.resolve(__dirname, "./dist/js"), publicPath: "/dist/", filename: "pagination.js", library: "pagination", libraryTarget: "umd", umdNamedDefine: true } // 其余默認就好 };
entry:修改打包的入口文件。
output:修改輸出文件到 dist/js下,生成文件名為pagination.js。
library:指定的就是你使用require時的模塊名,這里便是require("pagination")。
libraryTarget:會生成不同umd的代碼,可以只是commonjs標準的,也可以是指amd標準的,也可以只是通過script標簽引入的。
umdNamedDefine:會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define。
build
控制臺輸入 npm run build,會生成下列文件:
pack打包生成壓縮包
修改package.json 內容如下:
{ "name": "pagination", "description": "A vue.js 2.0 project on asynchronous paging ", "version": "0.1.0", "author": "y", "license": "MIT", "private": false, "main": "dist/js/pagination.js", "directories": { "dist": "dist" }, "files": [ "dist", "src" ], "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js" }, "repository": { "type": "git", "url": "git+https://github.com/yanzilingyan/vue.git" }, "keywords": [ "vue", "pagination", "ajax pagination" ], "dependencies": { "vue": "^2.4.4" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
控制臺輸入 npm pack,會看到在當前工程目錄下生成了一個文件 pagination-0.1.0.tgz
項目測試引入
另外新建一個工程項目,vue init webpack vue-ptest 此命令創建我們的項目的目錄,創建文件夾和文件,類似如下結構:
把剛才打包好的 pagination-0.1.0.tgz 這個壓縮包放到E盤目錄下(當然哪個位置都行,這里個人只是覺得方便些)。在當前 vue-ptest 這個工程目錄下,打開控制臺,輸入 npm install --save-dev E:pagination-0.1.0.tgz , 安裝剛才打包好的文件包。
修改main.js文件,引入此包,內容如下:
import Vue from "vue" import App from "./App" import router from "./router" import vPagination from "pagination" Vue.config.productionTip = false; Vue.use(vPagination); new Vue({ el: "#app", router, template: "", components: { App } });
修改HelloWorld.vue文件,引入分頁組件,內容如下:
{{ msg }}
Essential Links
打開控制臺,輸入 npm run dev ,啟動。
看到界面如下顯示:
OK,分頁組件顯示正常。
發布到npm
完成測試工作后我們就可以發布到npm了,這個就比較見到了,注冊個npm賬號,在你要發布的項目目錄執行npm login,輸入賬號密碼和郵箱,然后npm publish就發布成功了。
代碼更多的詳細信息請查看 此文提供的項目源碼。
以上就是本文的全部內容,希望能對大家有所幫助。如果有更好的建議或優化,歡迎大家多多評論~~ ^_^ ~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51549.html
摘要:網上看了一些文章,一般都是把封裝好的格式的文件發布到,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。本文以封裝一個分頁組件為例,把它生成目標文件,生成壓縮包測試,并發布到。修改輸出文件到下,生成文件名為。 網上看了一些文章,一般都是把封裝好的.vue格式的文件發布到npm,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。 本文以封裝一個分頁...
摘要:網上看了一些文章,一般都是把封裝好的格式的文件發布到,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。本文以封裝一個分頁組件為例,把它生成目標文件,生成壓縮包測試,并發布到。修改輸出文件到下,生成文件名為。 網上看了一些文章,一般都是把封裝好的.vue格式的文件發布到npm,感覺不太像一般組件的封裝形式,故特意書寫此文,希望能幫助到各位碼友。 本文以封裝一個分頁...
摘要:起初,項目使用的是,其提供的方法用著比較爽,由于項目的很多數據來自豆瓣的,直接上簡單方便,跨域什么的不考慮。跨域問題,上面已經介紹,在不能操控的豆瓣數據上,使用的是。 項目地址 在線演示 不識廬山真面目,只緣身在此山中。 大概一個月前,開源了Vue重構豆瓣移動端的項目,效果還可以,收到了很多小伙伴的反饋,話說是要寫一些文章的,但遲遲沒有動筆,估計小伙伴們等的花都謝了,拖延癥是病,需要治...
摘要:我發布了我的第一個組件,一個基于的標簽云組件。然后將這個編譯命令寫到里,如下那么以后要編譯下面的代碼,只需要執行現在我們已經有編譯好的代碼了,接下來就可以發布到供其他人使用了。 我發布了我的第一個 npm 組件,一個基于 react 的 3d 標簽云組件。在這途中我也是遇到了很多的坑,花在完善整個發布流程的時間遠多于寫這個組件本身的時間,所以我記錄下我覺得一個正常的 react 組件的...
閱讀 3428·2021-11-19 09:40
閱讀 1314·2021-10-11 11:07
閱讀 4846·2021-09-22 15:07
閱讀 2890·2021-09-02 15:15
閱讀 1964·2019-08-30 15:55
閱讀 539·2019-08-30 15:43
閱讀 883·2019-08-30 11:13
閱讀 1449·2019-08-29 15:36