PS D:\project\vsuite> node -v    //Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
v8.9.4
PS D:\project\vsuite> npm -v
5.6.0

npm install -g @vue/cli

PS D:\project\vsuite> vue --version
3.6.3

PS D:\project> vue create ts_demo
'pnpm' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���


Vue CLI v3.6.3
┌───────────────────────────┐
│  Update available: 4.1.2  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? 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: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v3.6.3
✨  Creating project in D:\project\ts_demo.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> nodent-runtime@3.2.1 install D:\project\ts_demo\node_modules\nodent-runtime
> node build.js

## Built D:\project\ts_demo\node_modules\nodent-runtime/dist/index.js

> yorkie@2.0.0 install D:\project\ts_demo\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@2.6.11 postinstall D:\project\ts_demo\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.6.1 postinstall D:\project\ts_demo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\project\ts_demo\node_modules\ejs
> node ./postinstall.js

added 1273 packages in 78.736s
�🚀  Invoking generators...
�📦  Installing additional dependencies...


> node-sass@4.13.0 install D:\project\ts_demo\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\Acer\AppData\Roaming\npm-cache\node-sass\4.13.0\win32-x64-57_binding.node

> node-sass@4.13.0 postinstall D:\project\ts_demo\node_modules\node-sass
> node scripts/build.js

Binary found at D:\project\ts_demo\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
added 167 packages in 26.156s
⚓  Running completion hooks...

�📄  Generating README.md...

�🎉  Successfully created project ts_demo.
�👉  Get started with the following commands:

 $ cd ts_demo
 $ npm run serve

D:\project\ts_demo
├─.browserslistrc
├─.eslintrc.js
├─.gitignore
├─babel.config.js
├─package-lock.json
├─package.json
├─README.md
├─tsconfig.json
├─tests
|   ├─unit
|   |  ├─.eslintrc.js
|   |  └example.spec.ts
├─src
|  ├─App.vue
|  ├─main.ts
|  ├─registerServiceWorker.ts
|  ├─shims-tsx.d.ts
|  ├─shims-vue.d.ts
|  ├─views
|  |   ├─About.vue
|  |   └Home.vue
|  ├─store
|  |   └index.ts
|  ├─router
|  |   └index.ts
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   ├─index.html
|   ├─robots.txt
|   ├─img
|   |  ├─icons
|   |  |   ├─favicon-16x16.png
|   |  |   ├─...
├─.git
|  ├─...

//package.json
{
  "name": "ts_demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
...
}

//.env.development
BASE_URL = "/development/"

//.env.production
BASE_URL = "/production/"

{
  "name": "typescript_demo1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
...
}

//.env.dev
NODE_ENV = "dev"
VUE_APP_URL = "/development/"

//.env.prod
NODE_ENV = "prod"
VUE_APP_URL = "/production/"

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";

Vue.config.productionTip = false;
console.log(process.env.NODE_ENV);
console.log(process.env.VUE_APP_URL);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

module.exports = {
 // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
 publicPath: '/',
 // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
 outputDir: 'dist',
 //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录，默认为""
 assetsDir:"",
 //指定生成的 index.html 的输出路径 (相对于 outputDir)
 indexPath:"",
 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
//如果这个值是一个对象，则会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
//如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
 configureWebpack: () => {},
//是一个函数，会接收一个基于 [webpack-chain](https://github.com/mozilla-neutrino/webpack-chain) 的 `ChainableConfig` 实例。允许对内部的 webpack 配置进行更细粒度的修改。
 chainWebpack: () => {},
 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,
 // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
 parallel: require('os').cpus().length > 1,
 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 /* webpack-dev-server 相关配置 */
 devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://47.100.47.3/',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
 },
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}

//vue.config.js
module.exports = {
  publicPath: "/",
  assetsDir: "static",
}

D:\project\ts_demo\dist
├─favicon.ico
├─index.html
├─manifest.json
├─robots.txt
├─js
| ├─about.js
| ├─app.js
| └chunk-vendors.js
├─img
|  ├─logo.82b9c7a5.png
|  ├─...

D:\project\ts_demo\dist
├─favicon.ico
├─index.html
├─manifest.json
├─robots.txt
├─static
|   ├─js
|   | ├─about.js
|   | ├─app.js
|   | └chunk-vendors.js
|   ├─img
|   |  └logo.82b9c7a5.png

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
module.exports = {
  publicPath: "/",
  assetsDir: "static",
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@router", resolve("src/router"))
      .set("@views", resolve("src/views"));
  }
};

vue inspect > webpack.config.js

npm i webpack-bundle-analyzer -D

NODE_ENV = 'prod'
IS_ANALYZ = 'analyz'

{
  "name": "ts_demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "analyz": "vue-cli-service build --mode analyz",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
...
}

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
module.exports = {
  publicPath: "/",
  assetsDir: "static",
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@router", resolve("src/router"))
      .set("@views", resolve("src/views"));
  }
  chainWebpack: config => {
    // 打包分析
    if (process.env.IS_ANALYZ) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          //  可以是`server`，`static`或`disabled`。
          //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
          //  在“静态”模式下，会生成带有报告的单个HTML文件。
          //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
          analyzerMode: "static"
        }
      ]);
    }
  }
};

File                               Size                Gzipped

  dist\static\js\chunk-vendors.js    567.50 KiB          128.21 KiB
  dist\static\js\app.js              80.62 KiB           7.91 KiB
  dist\static\js\about.js            6.84 KiB            1.19 KiB

npm i compression-webpack-plugin -D

D:\project\ts_demo\dist
├─favicon.ico
├─index.html
├─manifest.json
├─robots.txt
├─static
|   ├─js
|   | ├─about.js
|   | ├─app.js
|   | └chunk-vendors.js
|   ├─img
|   |  └logo.82b9c7a5.png
├─img
|  ├─icons

D:\project\ts_demo\dist
├─favicon.ico
├─index.html
├─manifest.json
├─robots.txt
├─static
|   ├─js
|   | ├─about.js
|   | ├─app.js
|   | ├─app.js.gz
|   | ├─chunk-vendors.js
|   | └chunk-vendors.js.gz
|   ├─img
|   |  └logo.82b9c7a5.png
├─img
|  ├─icons

//dll.config.js
const path = require("path");
const webpack = require("webpack");

// dll文件存放的目录
const dllPath = "public/vendor";

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: ["vue", "vue-router", "vuex"]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: "[name].dll.js",
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: "[name]_[hash]"
  },
  plugins: [
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
      // 保持与 output.library 中名称一致
      name: "[name]_[hash]",
      context: process.cwd()
    })
  ]
};

{
  "name": "ts_demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "analyz": "vue-cli-service build --mode analyz",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "inspect": "vue-cli-service inspect > webpack.config.js",
    "dll": "webpack -p --progress --config ./dll.config.js"
  },
  ...
}

npm i clean-webpack-plugin -D

//dll.config.js
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// dll文件存放的目录
const dllPath = "public/vendor";

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: ["vue", "vue-router", "vuex"]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: "[name].dll.js",
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: "[name]_[hash]"
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["*.*"]
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, "[name]-manifest.json"),
      // 保持与 output.library 中名称一致
      name: "[name]_[hash]",
      context: process.cwd()
    })
  ]
};

npm i add-asset-html-webpack-plugin -D

//vue.config.js
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
module.exports = {
  publicPath: "/",
  assetsDir: "static",
  configureWebpack: config => {
    //生产模式启用gzip压缩
    if (process.env.NODE_ENV === "prod") {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]", //目标资源文件名称
          algorithm: "gzip", //压缩算法
          test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, //匹配所有对应的文件
          threshold: 10240, //只处理比这个值大的资源。按字节计算
          minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理（minRatio = 压缩大小 / 原始大小）
          deleteOriginalAssets: false //是否删除原始资源
        }),
        new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require("./public/vendor/vendor-manifest.json")
        }),
        // 将 dll 注入到 生成的 html 模板中
        new AddAssetHtmlPlugin({
          // dll文件位置
          filepath: path.resolve(__dirname, "./public/vendor/*.js"),
          // dll 引用路径
          publicPath: `${process.env.BASE_URL}static/js/vendor`,
          // dll最终输出的目录
          outputPath: "static/js/vendor"
        })
      );
      // 合并plugins
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@router", resolve("src/router"))
      .set("@views", resolve("src/views"));
    // 打包分析
    if (process.env.IS_ANALYZ) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
        {
          //  可以是`server`，`static`或`disabled`。
          //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
          //  在“静态”模式下，会生成带有报告的单个HTML文件。
          //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
          analyzerMode: "static"
        }
      ]);
    }
  }
};

PS D:\project\ts_demo> npm run build

> ts_demo@0.1.0 build D:\project\ts_demo
> vue-cli-service build --mode prod


\  Building for prod...Starting type checking service...
Using 1 worker with 2048MB memory limit
\  Building for prod...

 DONE  Compiled successfully in 4587ms                                                                                                                                                                                                                                                      16:58:46
  File                                   Size              Gzipped

  dist\static\js\chunk-vendors.js        231.52 KiB        40.36 KiB
  dist\static\js\vendor\vendor.dll.js    104.53 KiB        35.37 KiB
  dist\vendor\vendor.dll.js              104.53 KiB        35.37 KiB
  dist\static\js\app.js                  84.10 KiB         8.27 KiB
  dist\static\js\about.js                6.84 KiB          1.19 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

npm i axios -S
npm i qs -S

//axios.tool.ts
/**
 * axios公共处理
 * 1、取消重复的请求
 * 2、集中处理接口失败的普通情况
 * 3、设置默认的表头
 * 4、设置默认的请求前缀
 * 5、设置请求超时限制
 * 6、设置token过期或者重新登录时，请求接口的处理，此时刷新页面到登录
 * 7、绑定公共的请求方法到vue原型：get和post
 */
import Vue from "vue";
import axios from "axios";
import qs from "qs";

// 取消请求
const CancelToken = axios.CancelToken;
// 设置默认请求头
axios.defaults.headers = {
  "X-Requested-With": "XMLHttpRequest",
  "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
  "Cache-Control": "no-cache",
  "If-Modified-Since": "0"
};
// Axios中post请求将data数据以request payload转换为form data的形式
axios.defaults.transformRequest = [
  function(data: any) {
    return qs.stringify(data);
  }
];
let _window: any = window;
//设置默认的请求前缀
axios.defaults.baseURL =
  process.env.NODE_ENV === "production" &&
  _window.location.pathname.indexOf("qualityBoard3") > -1
    ? process.env.VUE_APP_URL1
    : process.env.VUE_APP_URL;
// 请求超时的时间限制
axios.defaults.timeout = 20000;
// 开始设置请求 发起的拦截处理
// config 代表发起请求的参数的实体
const pending: any = {};
const removePending = (key: any, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]("取消重复请求");
  }
  delete pending[key];
};
/**
 * config: 请求数据
 * isReuest: 请求拦截器中 config.url = '/users', 响应拦截器中 config.url = 'http://localhost:3000/users'，所以加上一个标识来计算请求的全路径
 */
const getRequestIdentify = (config: any, isReuest = false) => {
  let url = config.url;
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length);
  }
  return config.method === "get"
    ? encodeURIComponent(url + JSON.stringify(config.params))
    : encodeURIComponent(config.url + JSON.stringify(config.data));
};
axios.interceptors.request.use(
  (config: any) => {
    // 拦截重复请求(即当前正在进行的相同请求)
    let requestData = getRequestIdentify(config, true);
    removePending(requestData, true);

    config.cancelToken = new CancelToken(c => {
      pending[requestData] = c;
    });

    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);
var account = _window.user ? _window.user.account : "";
// 请求到结果的拦截处理
axios.interceptors.response.use(
  (response: any) => {
    // 把已经完成的请求从 pending 中移除
    let requestData = getRequestIdentify(response.config);
    removePending(requestData);
    // 对响应数据做点什么
    if (process.env.NODE_ENV !== "development") {
      // sessionStatus 浏览器不一样，大小写不一样
      if (
        (response.headers.SESSIONSTATUS &&
          response.headers.SESSIONSTATUS === "TIMEOUT") ||
        (response.headers.Sessionstatus &&
          response.headers.Sessionstatus === "TIMEOUT") ||
        (response.headers.sessionstatus &&
          response.headers.sessionstatus === "TIMEOUT")
      ) {
        // 如果接口返回timeout,表示当前账号实际退出了，不管当前用户显示不显示，都刷新为未登录状态
        window.location.href = "https://xxx/login";
      } else if (
        (response.headers.USER && response.headers.USER !== account) ||
        (response.headers.User && response.headers.User !== account) ||
        (response.headers.user && response.headers.user !== account)
      ) {
        // 如果当前接口返回显示当前已经登录，而页面显示未登录或者显示登录的账号与实际登录的账号不一致，则刷新为正确账号
        // 当切换了账号，重新刷新页面登录
        window.location.reload();
      }
    }

    if (
      response.data.code !== undefined &&
      parseInt(response.data.code) !== 0
    ) {
      //接口错误处理
    }
    return response.data;
  },
  (error: any) => {
    return Promise.reject(error);
    // 错误的请求结果处理，这里的代码根据后台的状态码来决定错误的输出信息
  }
);
// 将axios 的 post 方法，绑定到 vue 实例上面的 $post
Vue.prototype.$post = (url: any, params: any) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then((res: any) => {
        resolve(res);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
// 将axios 的 get 方法，绑定到 vue 实例上面的 $get
Vue.prototype.$get = (url: any, params: any) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, { params: params })
      .then((res: any) => {
        resolve(res); // 返回请求成功的数据 data
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
//增加qs声明
declare module "qs" {
  const qs: any;
  export default qs;
}

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/registerServiceWorker";

Vue.config.productionTip = false;
console.log(process.env.NODE_ENV);
console.log(process.env.VUE_APP_URL);

import "./axios.tool"; // 导入封装好的axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom",
    "editor.formatOnSave": true,
    "eslint.lintTask.enable": true,
    "vetur.validation.template": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
}

//.prettierrc.js
module.exports = {
  singleQuote: false//禁止单引号
};

let a = '1';

let a = "1";

/**
 *{全局扫描注册组件}
 */
import Vue from "vue";

// 自动加载 common 目录下的 .js 结尾的文件
const componentsContext = require.context("@/components/common", true, /\.ts$/);
console.log(componentsContext);

componentsContext.keys().forEach((component) => {
  const componentConfig = componentsContext(component);
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.options.name, ctrl);
});

import "@/registerGlobalComponents";

//Hello.vue
<template>
  <div>Hello</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "Hello"
})
export default class Hello extends Vue {}
</script>

<style scoped></style>

//index.ts
import Hello from "./Hello.vue";
export default Hello;

<template>
  <div id="app">
    <Hello></Hello>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "./components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld
  }
})
export default class App extends Vue {}
</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;
  margin-top: 60px;
}
</style>

npm i ComponentsName -S

import "ComponentsName/dist/styles/vsuite.css";
import ComponentsName from "ComponentsName";
Vue.use(ComponentsName);

npm i babel-plugin-import -D

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ComponentsName",
        "libraryDirectory": "src/components"
      }
    ]
  ]
}

import Vue from "vue";
import {
  Icon
} from "ComponentsName";
Vue.component("Icon", Icon);