创建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模式下就省心很多……
不应该一味追随大厂（大佬），应该找到适合自己的，适合当前的开发方式
.
