【vue組件庫】基於@vue/cli構建typescript版UI庫 -環境搭建

使用@vue/cli4腳手架，從零開始搭建typescript版的UI庫

1. 全局安裝@vue/cli4

官網地址：https://cli.vuejs.org/zh/guid...

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version
@vue/cli 4.5.13 #當前版本

2.構建項目

# 建立項目totoro
vue create totoro

# 配置選項
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? 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) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? 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: vuecl4_vue2_ts
? Pick the package manager to use when installing dependencies: Yarn

3.簡單配置

vscode 保存自動格式化

# vscode settings.json文件
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

yarn serve時自動打開瀏覽器

# 項目根目錄新建vue.config.js配置文件

module.exports = {
  devServer: {
    open: true,// 啓動項目時自動打開瀏覽器
  },
};

4.目錄結構設計

• packages: 組件源碼
• website: 原src目錄，改成組件文檔官網，展現示例
• website/docs: 組件文檔和示例代碼 markdown格式
• src: 組件公用工具函數
• src/theme: 組件樣式文件夾（組件全部樣式統一放這裏）
• src/index.ts: 組件統一導出入口文件（總體導出，全量包）

5.修改vue.config.js配置

# vue.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");

module.exports = {
  devServer: {
    open: true,
  },
  pages: {
    index: {
      // page 的入口
      entry: "website/main.ts",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當使用 title 選項時
    },
  },

  configureWebpack: {
    resolve: {
      // 設置別名
      alias: {
        "totoro-ui": path.join(__dirname, "./"),
        packages: path.join(__dirname, "./packages"),
        "@": path.join(__dirname, "./website"),
        main: path.join(__dirname, "./src"),
      },
    },
  },
  // 擴展 webpack 配置，使 packages 加入編譯
  chainWebpack: (config) => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        // 修改它的選項...
        return options;
      });
  },
};