vite创建vue3引入elementui-plus + vue-router4过程_element vue route vite

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

$ yarn add element-plus

 main.js

import { createApp } from ‘vue’
import App from ‘./App.vue’

import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’

const app = createApp(App)

app.use(ElementPlus)
app.mount(‘#app’)

![](https://img-blog.csdnimg.cn/25378242556743099b923800ac52cfb9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc3Vubnlib3lzaXg=,size_20,color_FFFFFF,t_70,g_se,x_16)


##  四 引入路由


现在不带@4会把你装3.5.2版本

npm install vue-router@4

import { createRouter, createWebHashHistory } from ‘vue-router’

const routes = [
{
path: ‘/’,
name: ‘Home’,
component: () => import(‘…/page/Home.vue’),
},
]

const router = new createRouter({
history: createWebHashHistory(),
routes
})

export default router

main.js

import { createApp } from ‘vue’
import App from ‘./App.vue’

import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import router from ‘./router/router’ //router.js路径

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.mount(‘#app’)

修改版 把依赖放数组里面循环list

import { createApp } from ‘vue’
import App from ‘./App.vue’

import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’

import router from ‘./router/router’

const app = createApp(App)

let relyOnList = [ElementPlus, router]

relyOnList.forEach((item) => {
app.use(item)
})
app.mount(‘#app’)

![](https://img-blog.csdnimg.cn/5927e0f273d943d4a9c4d353751258f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc3Vubnlib3lzaXg=,size_20,color_FFFFFF,t_70,g_se,x_16)


##  五  package.json "preview": "vite preview"


1 先npm run build 打包生成dist



**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ed2c4f9602fb053965a21c047d1291e6.png)  

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

![](https://img-blog.csdnimg.cn/img_convert/81adbbfdefca6b401d7dc4e6acd9207d.png)