創(chuàng)建vite工程

# pnpm create vite my-vue-app --template vue-ts
pnpm create vite my-vue-app --template vue

上面命令創(chuàng)建的是 vue3 JS項(xiàng)目，如果你使用 TypeScript 可以選擇模板 vue-ts

可用的vite模板可以在vite官方網(wǎng)站上找到：

https://cn.vitejs.dev/guide/

下面是開發(fā) vue 項(xiàng)目必備的幾個(gè)依賴

pnpm add element-plus vue-router@4 pinia axios

pnpm add -D sass

vite.config.js

配置 vite.config.js ，代碼如下，（最基礎(chǔ)的配置，不多解釋）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

const pathSrc = path.resolve(__dirname, 'src')
const PORT = 5173;

// https://vitejs.dev/config/
export default ({ mode }) => {
  let BASE = "/"
  if (mode === "production") {
    // 可以執(zhí)行一些不同的配置，比如： BASE = "/public"
  }
  return defineConfig({
    base: BASE,
    server: {
      port: PORT
    },
    resolve: {
      alias: {
        '~/': `${pathSrc}/`
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // additionalData: `@use "~/styles/element/index.scss" as *;`,
        },
      },
    },
    plugins: [
      vue(),
    ],
  })
}

• 如果需要 element-plus 的 AutoImport ，還需要添加額外的 plugin ，會在下面介紹。（element-plus自動(dòng)導(dǎo)入）

配置完成后，就可以啟動(dòng)項(xiàng)目，看看效果

# 啟動(dòng)項(xiàng)目
npm run dev

ElMessageBox

關(guān)于 ElMessageBox 的說明

• 導(dǎo)入 ElMessageBox 時(shí)，需要先導(dǎo)入樣式，代碼如下：

import 'element-plus/es/components/message-box/style/css'
import { ElMessageBox } from 'element-plus'

ts-ignore

在 vscode 中有時(shí)會有報(bào)錯(cuò)提示，如下圖：

解決辦法是添加 //@ts-ignore （我創(chuàng)建的是JS工程，IDE本來不應(yīng)該報(bào)錯(cuò)的，但是vscode可能誤報(bào)，消除紅色提示就可以用這個(gè)方法）

導(dǎo)入pinia和router

修改main.js

import { createApp } from 'vue'
// import './style.css'
import './style.scss'
import App from './App.vue'
/*
pinia 可以參考
https://gitee.com/his0769/ch103_hello03_element-plus/blob/master/src/main.ts
https://gitee.com/his0769/ch103_hello03_element-plus/blob/master/src/store/counter.ts

vue-router
https://gitee.com/his0769/ch103_hello03_element-plus/blob/master/src/router/index.ts
https://gitee.com/his0769/ch103_hello03_element-plus/blob/master/src/main.ts

element-plus
https://element-plus.gitee.io/zh-CN/component/input.html

 */
import { createPinia } from 'pinia'
// 路由是自己創(chuàng)建的一個(gè) index 文件
import { router } from '~/router/index'

const app = createApp(App)

app.use(router)
app.use(createPinia())
app.mount('#app')

上面導(dǎo)入的路由文件~/router/index，代碼如下：

/*
vue router 官方文檔
https://router.vuejs.org/zh/guide/
 */

import { createRouter, createWebHashHistory } from 'vue-router'

// 組件
import UserScripts from '~/components/user_scripts/UserScripts.vue'
import PublicTable from '~/components/datas/public_table/PublicTable.vue'
import Settings from '~/components/datas/settings/Settings.vue'
import CommonUseWebsite from '~/components/common_use_website/CommonUseWebsite.vue'

// 路由
const routes = [
  {path: '/userscripts/index', component: UserScripts},
  {path: '/public_table/index', component: PublicTable},
  {path: '/settings/index', component: Settings},
  {path: '/common_use_website/index', component: CommonUseWebsite},
]

export const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

element-plus自動(dòng)導(dǎo)入

參考 element-plus 官方文檔 https://element-plus.gitee.io/zh-CN/guide/quickstart.html

https://element-plus.gitee.io/zh-CN/guide/quickstart.html

修改 vite.config.js 文件，導(dǎo)入下面的npm包

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

安裝命令如下：

pnpm add -D unplugin-vue-components unplugin-auto-import

并且修改 plugin 配置

// ...
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  })
}

雖然 element-plus 官方示例使用的是 TypeScript ，但是，不影響我們使用 JavaScript 開發(fā)，也不影響 AutoImport 發(fā)揮作用；

如果在開發(fā)中遇到報(bào)錯(cuò)，可以退出 npm run dev ，運(yùn)行一下 npm run build命令（build 時(shí)，會觸發(fā) AutoImport ），然后再運(yùn)行 npm run dev。

導(dǎo)入新的 element-plus 組件時(shí)需要這樣操作一下，已經(jīng)導(dǎo)入過的組件，不會出現(xiàn)問題；

個(gè)人觀點(diǎn)

• 我覺得使用 JS 開發(fā) vue 項(xiàng)目就夠了，不用著急追隨大佬（主流）
• 我曾花費(fèi)大量時(shí)間去學(xué)習(xí)和適應(yīng) TS 開發(fā) element-plus 應(yīng)用，遇到的困難比得到的享受多很多，作為獨(dú)立開發(fā)者，并不提供類庫，我覺得 JS 就夠用了，這減輕了心智和記憶負(fù)擔(dān)
• 有一點(diǎn)是需要肯定的：不斷記錄和總結(jié)
• 當(dāng)有一天，必須用 TS + ESLint 來重構(gòu)項(xiàng)目時(shí)，我已經(jīng)積累了很多 JS 開發(fā)的經(jīng)驗(yàn)，這時(shí)可以相對輕松的轉(zhuǎn)移過去

示例

上面示例就是脫離TypeScript開發(fā)的，開發(fā)過程很絲滑，少了各種莫名其妙的類型錯(cuò)誤…… ESLint 報(bào)錯(cuò)…… 也不用編寫額外的interface、type ，降低心智負(fù)擔(dān)，縮短開發(fā)時(shí)間

上圖代碼在 TS + ESLint 開發(fā)模式會報(bào)錯(cuò)，各種報(bào)錯(cuò)，在JS模式下就省心很多……

不應(yīng)該一味追隨大廠（大佬），應(yīng)該找到適合自己的，適合當(dāng)前的開發(fā)方式

.