vue 元件釋出記錄

lifefriend_007發表於2019-01-10
Vue元件

有段時間沒做獨立的 vue 元件了，最近突然想把一個常用的 vue 元件打成一個 npm 包，方便使用。好久不用，發現已經忘記環境怎麼搭建。翻看以前的元件，才慢慢回想起來，中間還出現些問題。在這記錄下開發過程，以備忘。

一、新建工程

打成 npm 包的 vue 元件一般不會太複雜，當然如果是做一個 UI 庫( 如：element-ui )，那另說。這裡使用 vue-cli官方提供的 webpack-simple 模板來建立工程

vue init webpack-simple <
project-name>
複製程式碼

二、初始化工程，安裝相關依賴

yarn install複製程式碼

三、建立元件相關目錄

1、src 目錄下新建 lib 資料夾，用來放置元件相關的檔案。

2、在 lib 下新建 index.js 檔案，用來匯出元件。index.js 內容如下：

import Demo from './demo.vue'const demo = { 
 install (Vue) { 
   Vue.component(Demo.name, Demo)  
  }
  }// IIFEif (typeof window !== 'undefined' &
&
 window.Vue) { 
     window.Vue.use(demo)
  }export default demo複製程式碼

3、在 lib 下新建 demo.vue 檔案，作為元件入口檔案。demo.vue 內容如下：

<
template>
  <
!--    元件 html 結構    -->
<
/template>
<
script>
export default { 
 name: "Demo",  props: { 
 
  },  data() { 
   return { 
   
  };
  
  },  mounted() { 
 
  },  methods: { 
 
  }
  };
<
/script>
<
style scoped>
<
/style>
複製程式碼

三、修改 webpack.config.js，進行編譯相關配置

const path = require('path')const webpack = require('webpack')const ENV = process.env.NODE_ENV.trim()const pJson = require('./package.json')module.exports = { 
   // 入口，區分 ENV 環境變數  entry: ENV==='production' ?'./src/lib/index.js':'./src/main.js',    // 輸出  output: ENV==='production' ?    { 
     path: path.resolve(__dirname, './dist'),      publicPath: '/dist/',      filename: pJson.name + '.js',      library: pJson.name,       libraryTarget: 'umd',       umdNamedDefine: true     
  }:{ 
   path: path.resolve(__dirname, './dist'),    publicPath: '/dist/',    filename: 'build.js'  
  },    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]'        
  }      
  }    ]  
  },  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'    module.exports.plugins = (module.exports.plugins || []).concat([        new webpack.DefinePlugin({ 
           'process.env': { 
        NODE_ENV: '"production"'      
  }    
  }),        // source-map 配置，區分 ENV 環境變數    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: ENV==='production' ? false : true,      compress: { 
       warnings: false      
  }    
  }),        new webpack.LoaderOptionsPlugin({ 
     minimize: true    
  })  ])
  }複製程式碼

四、元件效果預覽

1、修改 src/main.js 匯入元件

import Demo from './lib/index.js'Vue.use(Demo)複製程式碼

2、修改 src/App.vue 使用元件

 <
template>
   <
div id="app">
     <
Demo/>
   <
/div>
 <
/template>
複製程式碼

3、執行 ,瀏覽器預覽效果

yarn run dev複製程式碼

五、釋出

1、修改 package.json

"name": "demo","main": "dist/demo.js","private": false,複製程式碼

2、修改 .gitignore ，刪除 dist 條目，如果不刪除，提交時會忽略 dist 資料夾的內容，釋出後 npm 安裝使用時，會找不到檔案，因為元件編譯好的檔案是放在 dist 目錄下。

3、編寫 README ，介紹元件的功能

4、釋出( 預設已有帳號，且已登入 )

yarn run buildnpm config set registry=https://registry.npmjs.orgnpm publish複製程式碼

來源：https://juejin.im/post/5c371f906fb9a049f06a76cd

相關文章