创建vite工程

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

上面命令创建的是 vue3 JS项目，如果你使用 TypeScript 可以选择模板 vue-ts

可用的vite模板可以在vite官方网站上找到：

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

下面是开发 vue 项目必备的几个依赖

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

pnpm add -D sass

vite.config.js

配置 vite.config.js ，代码如下，（最基础的配置，不多解释）

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") {
    // 可以执行一些不同的配置，比如： 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自动导入）

配置完成后，就可以启动项目，看看效果

# 启动项目
npm run dev

ElMessageBox

关于 ElMessageBox 的说明

导入 ElMessageBox 时，需要先导入样式，代码如下：

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

ts-ignore

在 vscode 中有时会有报错提示，如下图：

解决办法是添加 //@ts-ignore （我创建的是JS工程，IDE本来不应该报错的，但是vscode可能误报，消除红色提示就可以用这个方法）

导入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'
// 路由是自己创建的一个 index 文件
import { router } from '~/router/index'

const app = createApp(App)

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

上面导入的路由文件~/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自动导入

参考 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 文件，导入下面的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 开发，也不影响 AutoImport 发挥作用；

如果在开发中遇到报错，可以退出 npm run dev ，运行一下 npm run build命令（build 时，会触发 AutoImport ），然后再运行 npm run dev。

导入新的 element-plus 组件时需要这样操作一下，已经导入过的组件，不会出现问题；

个人观点

我觉得使用 JS 开发 vue 项目就够了，不用着急追随大佬（主流）
我曾花费大量时间去学习和适应 TS 开发 element-plus 应用，遇到的困难比得到的享受多很多，作为独立开发者，并不提供类库，我觉得 JS 就够用了，这减轻了心智和记忆负担
有一点是需要肯定的：不断记录和总结
当有一天，必须用 TS + ESLint 来重构项目时，我已经积累了很多 JS 开发的经验，这时可以相对轻松的转移过去

示例

上面示例就是脱离TypeScript开发的，开发过程很丝滑，少了各种莫名其妙的类型错误…… ESLint 报错…… 也不用编写额外的interface、type ，降低心智负担，缩短开发时间

上图代码在 TS + ESLint 开发模式会报错，各种报错，在JS模式下就省心很多……

不应该一味追随大厂（大佬），应该找到适合自己的，适合当前的开发方式

vite element-plus 简单示例