vite + vue3 + ts 项目记录

最近因工作需求，要搭建一个后台管理系统，正好想试一试新技术，决定用vite + vue3 + ts来试一试。

直接用vite脚手架搭一个项目

为什么用vite

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

• 快速的冷启动，不需要等待打包操作；
• 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
• 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

创建一个vite项目

# npm 
npm init vite-app <project-name>
cd <project-name>
npm install 
npm run dev

# yarn
yarn create vite-app <project-name>
cd <project-name>
yarn 
yarn dev

样式框架选用Element Plus

怎么修改 Element Plus 的主题颜色

参考官网

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";

import Vue from 'vue'
import ElementPlus from 'element-plus'
import './element-variables.scss'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

但是 element-plus 报错

Error: Can't find stylesheet to import.
  ╷
7 │ @import "~element-plus/packages/theme-chalk/src/index";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src\element-variables.scss 7:9  root stylesheet
    at Object._newRenderError (E:\CMS-vite\node_modules\sass\sass.dart.js:13494:19)
    at Object._wrapException (E:\CMS-vite\node_modules\sass\sass.dart.js:13337:16)
    at StaticClosure._renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:13312:18)
    at Object.Primitives_applyFunction (E:\CMS-vite\node_modules\sass\sass.dart.js:1085:30)
    at Object.Function_apply (E:\CMS-vite\node_modules\sass\sass.dart.js:6003:16)
    at _callDartFunctionFast (E:\CMS-vite\node_modules\sass\sass.dart.js:7672:16)
    at Object.renderSync (E:\CMS-vite\node_modules\sass\sass.dart.js:7650:18)
    at scss (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:960:33)
    at preprocess$1 (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1155:12)
    at doCompileStyle (E:\CMS-vite\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:1058:48) {
  formatted: "Error: Can't find stylesheet to import.\n" +

解决方案

$--color-primary: #fc9153;
$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts';
@import "node_modules/element-plus/packages/theme-chalk/src/index";
@import 'node_modules/element-plus/lib/theme-chalk/display';