1. 项目初始化

1. 初始化代码

   1. 脚手架启动

   # 找到目录
   yarn create vite
   # 然后选择 vue, typescript 等配置
   # OR 使用
   yarn create vite my-demo-app --template vue-ts
   # 按照提示进入目录，安装依赖，启动服务。如果能正常启动服务，说明初始化成功。
   

   2. 修改 vite.config.ts 配置 下面是完整的配置文件内容。

   // @ts-nocheck
   import { fileURLToPath, URL } from "node:url"
   import { defineConfig } from "vite"
   import vue from "@vitejs/plugin-vue"
   import { resolve } from "path"
   
   import AutoImport from "unplugin-auto-import/vite"
   import Components from "unplugin-vue-components/vite"
   import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
   
   // https://vite.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       AutoImport({
         resolvers: [ElementPlusResolver()]
       }),
       Components({
         resolvers: [ElementPlusResolver()]
       })
     ],
     resolve: {
       alias: {
         "@": fileURLToPath(new URL("./src", import.meta.url)),
         "@p": fileURLToPath(new URL("./package", import.meta.url))
       }
     },
     server: {
       open: true,
       port: 3008,
       host: "0.0.0.0" // 还要再package.json中也配置一下， 才能实现使用 ip 地址访问启动的服务
     },
     build: {
       outDir: "yl-plus",
       lib: {
         entry: resolve(__dirname, "./package/index.ts"),
         name: "yl-plus",
         fileName: (format) => `yl-plus.${format}.js`
       },
       rollupOptions: {
         // 确保外部化处理那些你不想打包进库的依赖
         external: ["vue"],
         output: {
           // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
           globals: {
             vue: "Vue"
           }
         }
       }
     },
     css: {
       preprocessorOptions: {
         less: {
           modifyVars: {
             hack: `true; @import (reference) "${resolve(__dirname, "src/assets/base.less")}"` // 全局定义的less文件
           },
           javascriptEnabled: true
         }
       }
     }
   })
   
   

   3. 使用 volta 为项目绑定 具体的 node version。 参考Volta 更好用的 node 版本管理工具

   # 命令行输入指令
   volta pin node@20.16.0
   

   之后会在 package.josn 文件中看到

   "volta": {
       "node": "20.16.0"
     }
   

   即配置完成。

2. 添加 自动格式化 配置 参考 使用 ESlint + Prettier 做代码校验和格式化

   1. 安装& 配置 Eslint

      yarn add eslint -D
      # 安装后初始化命令
      yarn eslint --init
      #根据选项配置，会自动生成配置文件 生成 *eslint.config.js* 文件。
      

   cofig-eslint-init.jpg

  ```js
  // *eslint.config.js* 文件内容
  
  import globals from "globals";
  import pluginJs from "@eslint/js";
  import tseslint from "typescript-eslint";
  import pluginVue from "eslint-plugin-vue";
  
  
  /** @type {import('eslint').Linter.Config[]} */
  export default [
    {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
    {languageOptions: { globals: globals.browser }},
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    ...pluginVue.configs["flat/essential"],
    {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
  ];
  ```

2. 安装& 配置 Prettier

   yarn add prettier -D
   

   然后在根目录创建文件 prettier.json 或 prettier.config.js。这里使用 pritter.json文件。并录入以下内容。具体配置详解参考

   # pritter.json 文件内容，配置说明这里不做赘述
   {
     "printWidth": 100,
     "tabWidth": 2,
     "useTabs": true,
     "semi": false,
     "singleQuote": true,
     "trailingComma": "none",
     "bracketSpacing": true,
     "bracketSameLine": true,
     "arrowParens": "always",
     "htmlWhitespaceSensitivity": "ignore",
     "vueIndentScriptAndStyle": false,
     "endOfLine": "auto",
     "singleAttributePerLine": false,
     "useEditorConfig": false
   }
   

3. 生成 .vscode 配置文件

   1. 打开 vscode 编辑器的配置文件, 在 vscode 主界面快捷键 ctrl+shift+p , 弹窗里的 首选项: Open WorkSpace Settings(JSON)。然后就能在项目目录中看到 .vscode 的文件目录

   2. 在 .vscode/settings.json 文件中写入下面配置代码

      {
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
        },
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
      }
      

4. 配置完成。

   1. 如果不生效重启编译器后再试。
   2. 检查 useEditorConfig 的默认配置，在 vscode 的 Prettier的拓展中设置 useEditorConfig 为 false。或者 如上 在 prettier.json 文件中添加 useEditorConfig: false 选项。

5. 安装 element-plus 组件库

   1. 安装依赖 install

      yarn add element-plus
      

2. 使用组件，这里使用 按需导入

   1. 安装

      npm install -D unplugin-vue-components unplugin-auto-import
      

   2. 修改 vite.config.ts 配置

      import { defineConfig } from 'vite'
      import AutoImport from 'unplugin-auto-import/vite'
      import Components from 'unplugin-vue-components/vite'
      import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
      
      export default defineConfig({
        // ...
        plugins: [
          // ...
          AutoImport({
            resolvers: [ElementPlusResolver()],
          }),
          Components({
            resolvers: [ElementPlusResolver()],
          }),
        ],
      })
      

4. 安装 less 预编译

   1. 安装

      yarn add less less-loader
      # OR
      npm install less less-loader
      

2. 配置 vite.config.ts 文件

   css: {
       preprocessorOptions: {
         less: {
           modifyVars: {
             hack: `true; @import (reference) "${resolve(__dirname, "src/assets/base.less")}"` // 全局定义的less文件
           },
           javascriptEnabled: true
         }
       }
     }
   

5. 初始化目录--后续使用中补充。