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

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

一 创建项目

# 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

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题