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

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一 创建项目

# npm 7+，需要加上额外的双短横线
npm init vite@latest demo-vite -- --template vue

cd demo-vite

npm install

npm run dev

二 在vscode 执行npm run dev  会出现第一个疑惑 Network: use --host to expose

//在vite.config.js 添加
server: {
  host: "0.0.0.0"
}

三 引入elementui-plus

# NPM
$ npm install element-plus --save

# Yarn
$ 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')

四 引入路由

现在不带@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

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】