快速构建vue3 + vite项目

相关描述在下面链接
https://cn.vuejs.org/guide/quick-start.html#with-build-tools

main.ts引入element-plus组件，图标，样式

import { createApp } from "vue";
import router from "./router";//
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import ElementPlus from "element-plus";//引入element-plus
import "element-plus/dist/index.css";//引入element-plus样式
import './style.css'
import App from "./App.vue";

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }

  app.use(ElementPlus).use(router).mount("#app");


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

照着上面链接内容，创建的项目package.json内容

{
  "name": "webmpm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode dev",
    "build": "vite build --mode master",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.9",
    "axios": "^0.27.2",
    "element-plus": "^2.2.12",
    "vue": "^3.2.37",
    "vue-router": "^4.1.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4",
    "vuex": "^4.0.2"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26