yarn create vite vite-vue2 --template vue
yarn add vue@2 vue-template-compiler
yarn add vite-plugin-vue2 -D
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig({
plugins: [createVuePlugin()],
})
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: (h) => h(App),
}).$mount('#app')
- modify component with vue2 syntax
yarn add element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
yarn add sass
// element-variables
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
// vite.config.js
import path from 'path'
export default defineConfig({
resolve: {
alias: [
{
find: /^~(.*)$/,
replacement: '$1',
},
{
find: /^@\//,
replacement: `${path.resolve(__dirname, 'src')}/`,
},
],
},
css: {
preprocessorOptions: {
scss: {
quietDeps: true,
additionalData: `@import '@/element-variables.scss';`,
},
},
},
})
// https://github.com/vitejs/vite/issues/6736
// package.json
"devDependencies": {
"sass": "npm:sass-embedded@latest",
}