vite创建vue2项目新建一个vite项目类型为vanilla 添加依赖与配置引入element-ui 新建/修改相

新建一个vite项目类型为`vanilla`

npm init vite@latest

添加依赖与配置

npm i vite-plugin-vue2 unplugin-vue-components sass vue-template-compiler -D
npm i vue axios element-ui

引入element-ui

npm i element-ui 
# 修改sass版本, 避免终端出现大量警告
npm i sass@1.32.13 -D

新建/修改相关文件

src/main.js

import Vue from 'vue'
import './element-ui'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App),
}).$mount()

src/App.vue

<tempalte>
    <div>
        <h3>Hello World</h3>
        <el-button>按钮</el-button>
    </div>
</template>

src/element-ui.js

import Vue from 'vue'

import 'element-ui/packages/theme-chalk/src/base.scss'
import 'element-ui/packages/theme-chalk/src/alert.scss'
import 'element-ui/packages/theme-chalk/src/loading.scss'
import 'element-ui/packages/theme-chalk/src/message.scss'
import 'element-ui/packages/theme-chalk/src/notification.scss'
import 'element-ui/packages/theme-chalk/src/message-box.scss'

import { Loading, MessageBox, Notification, Message } from 'element-ui'

Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

jsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.vue", "src/**/*.js"]
}

vite.config.js

import { createVuePlugin } from 'vite-plugin-vue2'
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    createVuePlugin(/* options */),
    Components({
      resolvers: [ElementUiResolver({ importStyle: 'sass' })],
    }),
  ],
}