基于上篇我們講了?在window下搭建Vue.Js開發環境

我們可以開發自己的vue.js插件發布到npm上,供大家下載使用。

1.首先打開cmd命令窗口，進入我們的工作目錄下

? 執行?cd E:\vue

2.使用webpack的簡單模板創建我們的項目，比如vue-dialog-rexsheng

vue init webpack-simple vue-dialog-rexsheng

如下圖，輸入項目名稱，項目描述，項目作者，認證單位，sass選擇N

?

創建成功后，我們會發現工作目錄e:/vue下多了一個項目目錄vue-dialog-rexsheng

3.進入項目目錄vue-dialog-rexsheng下，

? cd?vue-dialog-rexsheng

我們使用visual studio code做為開發工具，在vscode里打開這個項目,項目結構如圖

?

4.項目結構建好后，下面開始開發

? 先安裝項目的依賴包

? ?npm install? （若網絡不好可使用淘寶鏡像進行安裝cnpm install,安裝參考 在window下搭建Vue.Js開發環境）

?

?啟動項目 npm run dev

?

瀏覽器打開網址?http://localhost:8081/ 如上圖的藍色字體，端口根據大家電腦實際情況可能不同

項目已經運行起來了，表明項目一開始是ok的，下面進行插件的具體開發

5.vscode里，src目錄下新建文件夾lib,lib下新建文件index.js

?

index.js里輸入插件的安裝腳本如下圖

?

插件如何開發請參考?https://cn.vuejs.org/v2/guide/plugins.html

6.打包配置

修改文件webpack.config.js如下圖，

?

var path = require('path') var webpack = require('webpack')module.exports = {entry: './src/lib/index.js',//資源入口文件 output: {path: path.resolve(__dirname, './dist'),//打包輸出目錄publicPath: '/dist/',//公共資源路徑filename: 'dialog.js',//輸出的主文件library: 'vuedialogrexsheng',//庫名，此名稱用于require('vuedialogrexsheng')libraryTarget: 'umd',//目標平臺，libraryTarget會生成不同umd的代碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標簽引入的。umdNamedDefine: true//會對 UMD 的構建過程中的 AMD 模塊進行命名。否則就使用匿名的 define。 },module: {rules: [{test: /\.css$/,use: ['vue-style-loader','css-loader'],}, {test: /\.vue$/,loader: 'vue-loader',options: {loaders: {}// other vue-loader options go here }},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.(png|jpg|gif|svg)$/,loader: 'file-loader',options: {name: '[name].[ext]?[hash]'}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'file-loader',options: {limit: 10000,name: 'fonts/[name].[hash:7].[ext]'}}]},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'},extensions: ['*', '.js', '.vue', '.json']},devServer: {historyApiFallback: true,noInfo: true,overlay: true},performance: {hints: false},devtool: '#eval-source-map' }if (process.env.NODE_ENV === 'production') {module.exports.devtool = '#source-map'// http://vue-loader.vuejs.org/en/workflow/production.htmlmodule.exports.plugins = (module.exports.plugins || []).concat([new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),new webpack.optimize.UglifyJsPlugin({sourceMap: true,compress: {warnings: false}}),new webpack.LoaderOptionsPlugin({minimize: true})]) } View Code

?

修改package.json,

private :false,

main: '引用時指向的文件'

7.打包編譯

?npm run build

?

在項目dist目錄下多了這兩個文件，.map文件是調試用的，這里可忽略

8.如果你已經有npm用戶賬戶了，可忽略這一步的用戶注冊

到網址?https://www.npmjs.com/?進行新用戶注冊

注冊成功后，記住用戶名及密碼

9.項目目錄下新建文件 .npmignore，里面寫入需要忽略的文件

? 實際發布的文件只需要dist/dialog.js,package.json ,README.md(可選，里面寫上插件如何使用)

?

10.項目目錄下執行

? npm whoami

如果出現以上提示，表明本機從未添加過用戶或者用戶未登陸，

1) 添加新用戶需要執行

?npm adduser

?

2) 本機以前登陸過賬戶，現在重新登陸使用

npm login

?11.發布項目

? ?npm publish

?

?

這時候，到npm官網里搜索我們的項目vue-dialog-rexsheng

會發現我們的項目已經能夠搜到了

?

?

現在，你可以在任何項目里使用npm安裝這個插件了，npm install? vue-dialog-rexsheng --save-dev

安裝完之后，main.js中引用

import?dlg?from?'vue-dialog-rexsheng';

Vue.use(dlg);

?

轉載于:https://www.cnblogs.com/RexSheng/p/10500339.html

總結

以上是生活随笔為你收集整理的Vue.Js添加自定义插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。