Vue组件-从零开始到发布npm

一、环境准备

基础的vue环境不说了，挂图

但是要安装一个@vue/cli-init(不装的话下面创建项目会失败)

npm install -g @vue/cli-init

二、初始化项目

对于写组件发布来说不需要太多的配置，采用webpack-simple初始化项目

vue init webpack-simple test-vue-npm

项目目录：

三、修改内容

1. JButton.vue

//JButton.vue
<template>
  <div class="btn">{{ text }}</div>
</template>
<script>
export default {
  name: "JButton",
  props: ["text"],
};
</script>
<style>
.btn {
  border: 1px solid green;
}
</style>

2. index.js

// 导入封装的组件
import JButton from "./components/JButton.vue";

const components = {
  // 通过install来安装组件
  install(Vue) {
    Vue.component("j-button", JButton);
  },
};

// 注意这里的判断，很重要
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(components);
}

// 导出组件库
export default components;

四、修改配置

1. package.json

{
  "name": "j-button",//发布的组件名称
  "description": "A Vue.js project",
  "version": "1.0.0",//发布的组件版本
  "author": "",//作者
  "license": "MIT",
  "private": false,//是否私有的
  "main": "dist/j-button.js",//组件引用的文件
  "keywords": [//npm 中被搜索的关键字
    "test",
    "vue-npm"
  ],
  "files": [//上传时，要上传的文件，package默认上传
    "dist",
    "src/components"
  ],
  "homepage": "https://xx.github.io/xx/xx-btn/dist/index.html",//主页
  "bugs": {//提 bug 的页面
    "url": "https://github.com/xx/xx-btn/issues"
  },
  "repository": {//项目git地址
    "type": "git",
    "url": "https://github.com/xx/xx-btn.git"
  },
  //后面与组件发布无关
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "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"
  }
}

2. webpack.config.js

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // entry: "./src/main.js",
  entry: "./src/components/index.js", // 入口文件
  output: {
    // 修改输出文件到 dist 下
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    // filename: 'build.js'
    filename: "j-button.js", // 生成的文件名
    library: "j-button", // 指定的就是你使用require时的模块名
    libraryTarget: "umd", // 会生成不同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]",
        },
      },
    ],
  },
  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",
};

五、构建

在项目根目录的控制台安装并构建

//安装命令
npm install
//构建命令
npm run build

结果如下：

六、本地打包测试

//打包命令
npm pack

会打包出一个j-button-1.0.0.tgz文件

随便找个项目安装

//安装本地包命令
yarn add D:\CSDN\j-button-1.0.0.tgz

然后在mian.js正常引用全局就可以用了

//main.js 
import JButton from 'vue-jtopo';
Vue.use(JButton);

使用文件

//App.vue
<template>
	<j-button :text="btnText"></j-button>
</template>
<script>
export default {
  name: 'App',
  data: function {
    return {
    	btnText:"this is a message!"
    }
  },
};
</script>

七、发布npm

1. 获取npm账号 直接去官网注册
2. 在项目根目录控制台中登陆账号

//npm登陆命令
npm login
//然后会对话式交互，输入账号、密码和邮箱

3. 发布

//发布命令
npm publish --access public

4. 然后就可以正常的使用命令安装使用了

//安装命令
npm install j-button
//使用跟六中的一样

八、注意

1. 一定要安装@vue/cli-init否则无法创建简单webpack应用
2. 如果之前使用cnpm的话现在，会有许多奇奇怪怪的问题（不要在使用了）。登陆不上，没有权限，无法用yarn等等。
   解决方案：
   找到.npmrc 文件，将里面的
   registry=http://registry.npm.taobao.org
   改成:
   registry=http://registry.npmjs.org/

.npmrc 文件在
window的 C:\Users\Administrator 下
linux的~/.npmrc