vue cli4构建基于typescript的vue组件并发布到npm

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @vue/cli@4.4.6added 1230 packages from 670 contributors in 118.122s

@vue/cli 4.4.6

Vue CLI v4.4.6? Please pick a preset: Manually select features? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter? Use class-style component syntax? Yes? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes? Use history mode for router? (Requires proper server setup for index fallback in production) Yes? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? Yes? Save preset as: ts_tmpl

⚓  Running completion hooks...�  Generating README.md...�  Successfully created project my-project-name.�  Get started with the following commands: $ cd my-project-name $ npm run serve

E:\vue_codes>cd my-project-nameE:\vue_codes\my-project-name>npm run serve> my-project-name@0.1.0 serve E:\vue_codes\my-project-name> vue-cli-service serve INFO  Starting development server...Starting type checking service...Using 1 worker with 2048MB memory limit98% after emitting CopyPlugin DONE  Compiled successfully in 5304ms                                                                      上午11:13:54No type errors foundVersion: typescript 3.9.7Time: 3160ms  App running at:  - Local:   http://localhost:8080/  - Network: http://192.168.1.95:8080/  Note that the development build is not optimized.  To create a production build, run npm run build.

{  "name": "jie-echarts",  "version": "0.1.0",  "private": false,  "description": "echarts组件",  "main": "dist/JieEcharts.common.js",  "author": "zouqj<zouyujie@126.com>",  "license": "MIT",  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint",    "lib": "vue-cli-service build --target lib --name JieEcharts ./src/index.ts"  },

  "dependencies": {    "core-js": "^3.6.5",    "echarts": "^4.8.0",    "ts-loader": "^8.0.1",    "vue": "^2.6.11",    "vue-class-component": "^7.2.3",    "vue-property-decorator": "^8.4.2",    "vue-router": "^3.2.0",    "vuex": "^3.4.0"  },  "devDependencies": {    "@types/echarts": "^4.6.4",    "@typescript-eslint/eslint-plugin": "^2.33.0",    "@typescript-eslint/parser": "^2.33.0",    "@vue/cli-plugin-babel": "~4.4.0",    "@vue/cli-plugin-eslint": "~4.4.0",    "@vue/cli-plugin-router": "~4.4.0",    "@vue/cli-plugin-typescript": "~4.4.0",    "@vue/cli-plugin-vuex": "~4.4.0",    "@vue/cli-service": "~4.4.0",    "@vue/eslint-config-prettier": "^6.0.0",    "@vue/eslint-config-typescript": "^5.0.2",    "eslint": "^6.7.2",    "eslint-plugin-prettier": "^3.1.3",    "eslint-plugin-vue": "^6.2.2",    "node-sass": "^4.12.0",    "prettier": "^1.19.1",    "sass-loader": "^8.0.2",    "typescript": "~3.9.3",    "vue-template-compiler": "^2.6.11"  }}

{  "compilerOptions": {    "target": "esnext",    "module": "esnext",    "strict": true,    "jsx": "preserve",    "importHelpers": true,    "moduleResolution": "node",    "experimentalDecorators": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "sourceMap": true,    "baseUrl": ".",    "typeRoots": ["/@types", "./node_modules/@types"],    "types": ["webpack-env"],    "paths": {      "@/*": ["src/*"]    },    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]  },  "include": [    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx"  ],  "exclude": ["node_modules"]}

'use strict';// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const webpack = require('webpack');const path = require('path');const resolve = (dir) => path.resolve(__dirname, dir);module.exports = {  // 修改 src 目录 为 examples 目录  pages: {    index: {      entry: 'examples/main.ts',      template: 'public/index.html',      filename: 'index.html',    },  },  // vue 通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的图片路径，再用 url-loader 将小于 4kb 的  // 图片内联，以减少 HTTP 请求的数量。所以我们可以通过 chainWebpack 调整图片的大小限制。例如，我们将  // 图片大小限制设置为 13kb，低于13kb的图片全部被内联，高于13kb的图片会放在单独的img文件夹中。  chainWebpack: (config) => {    const imagesRule = config.module.rule('images');    imagesRule      .use('url-loader')      .loader('url-loader')      .tap((options) => Object.assign(options, { limit: 13312 }));  },  // 设置css: { extract: false },可以强制内联，就不会将css单独打包成一个文件，导致页面没有style  css: { extract: false },  productionSourceMap: false,};

.*package-lock.json/.git//.vscode/tslint.jsontsconfig.json*.log.DS_Store/dist/examples/node_modules/public/src/tests.browserslistrcjest.config.jsvue.config.js# local env files.env.local.env.*.local# Log filesnpm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.vscode.gitignore.npmignore.npmrc*.suo*.ntvs**.njsproj*.sln*.sw?

import jieEcharts from './jie-echarts.vue';(jieEcharts as any).install = (Vue: any) => {  Vue.component(jieEcharts.name, jieEcharts);};export default jieEcharts;

<template>  <!-- 每一个图表都有自己唯一的id,需要动态传入。 -->  <div :ref="id" :id="id" :class="myclass" :style="style" /></template><script lang="ts">import { Component, Vue, Prop, Watch } from "vue-property-decorator";import Echarts from "echarts";@Component({  name: "jie-echarts"})export default class extends Vue {  @Prop({ default: "myCharts" }) private id!: string;  @Prop({ default: "100%" }) private width!: string;  @Prop({ default: "200px" }) private height!: string;  @Prop({ default: "echarts-line" }) private myclass!: string;  @Prop() private options!: object;  @Prop({ default: false }) private loading!: boolean;  private MyEcharts: any = null; // echarts实例  created() {    console.log("this.options :>> ", this.options);  }  mounted() {    this.InitCharts();  }  get style() {    return {      height: this.height,      width: this.width    };  }  @Watch("options", { deep: true })  onChangeOption(newVal: string, oldVal: string) {    if (this.MyEcharts) {      if (newVal) {        // console.log(JSON.stringify(newVal))        this.MyEcharts.setOption(newVal, true);      } else {        this.MyEcharts.setOption(oldVal, true);      }      setTimeout(() => {        this.MyEcharts.resize();      });    } else {      this.InitCharts();    }  }  @Watch("height")  onChangeHeight(val: string) {    if (val) {      this.height = val;    }    if (this.MyEcharts) {      this.MyEcharts.setOption(this.options, true);    } else {      this.InitCharts();    }  }  @Watch("loading")  onChangeLoading(val: boolean) {    if (val == true) {      this.showLoading();    }    if (val == false) {      this.hideLoading();    }  }  //-----------------------method----------------------  // 组件初始化  private InitCharts() {    const dom: any = this.$refs[this.id] as HTMLDivElement; // document.getElementById(this.id);    this.MyEcharts = Echarts.init(dom);    if (this.loading == true) {      this.showLoading();    }    /**     * 此方法适用于所有项目的图表，但是每个配置都需要在父组件传进来，相当于每个图表的配置都需要写一遍，不是特别的省代码，主要是灵活度高     * echarts的配置项，你可以直接在外边配置好，直接扔进来一个this.option     */    this.MyEcharts.clear(); // 适用于大数据量的切换时图表绘制错误,先清空在重绘    this.MyEcharts.setOption(this.options, true); // 设置为true可以是图表切换数据时重新渲染    setTimeout(() => {      this.MyEcharts.resize();    });    // 当窗口变化时随浏览器大小而改变    window.addEventListener("resize", () => {      this.MyEcharts.resize();    });    this.MyEcharts.on("click", (params: any) => {      this.mapClick(params);    });  }  //组件单击事件  private mapClick(params: any) {    // console.log(params, 999999);    const data = {      color: params.color,      data: params.data,      dataIndex: params.dataIndex,      seriesIndex: params.seriesIndex,      chartType: params.componentSubType    };    this.$parent.$emit("chartParams", JSON.stringify(data));    if (params.seriesType == "map") {      this.$emit("mapValue", params.name);    }       this.$emit("eclick", params);  }  private showLoading() {    if (this.MyEcharts) {      this.MyEcharts.showLoading({        text: "loading"        // color: '#4cbbff',        // textColor: '#4cbbff',      });    }  }  private hideLoading() {    if (this.MyEcharts) {      this.MyEcharts.hideLoading();    }  }
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.MyEcharts.resize();
    });
  }}</script><style lang="scss" scoped>.echarts-line {  height: 100%;}</style>

import Vue from 'vue';export class VanComponent {  static name: string;  static install(vue: typeof Vue): void;}

declare module "*.vue" {  import Vue from "vue";  export default Vue;}

<template>  <div id="app">    <jie-echarts :options="echartsOptions"></jie-echarts>  </div></template><script lang="ts">import { Component, Vue, Watch, Prop } from "vue-property-decorator";import jieEcharts from "../src/index";@Component({  components: {    jieEcharts  }})export default class TestJieEchartsPreview extends Vue {  protected echartsOptions = {    xAxis: {      type: "category",      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]    },    yAxis: {      type: "value"    },    series: [      {        data: [820, 932, 901, 934, 1290, 1330, 1320],        type: "line"      }    ]  };}</script><style lang="scss">#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;}#nav {  padding: 30px;  a {    font-weight: bold;    color: #2c3e50;    &.router-link-exact-active {      color: #42b983;    }  }}</style>