快捷導(dǎo)航

vue3.0+vue-router+element-plus初實(shí)踐

更新時(shí)間：2020年12月02日 14:11:47 作者：kiscon

這篇文章主要介紹了vue3.0+vue-router+element-plus初實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Vue3中文文檔

Vue3.0對(duì)比Vue2.x優(yōu)勢(shì)

框架內(nèi)部做了大量的性能優(yōu)化，包括：虛擬dom，編譯模板，Proxy的新數(shù)據(jù)監(jiān)聽(tīng)，更小的打包文件等。
新增的組合式API（即Composition API），更適合大型項(xiàng)目的編寫方式。
對(duì)TypeScript支持更好，去掉this操作，更強(qiáng)大的類型推導(dǎo)。

初始化項(xiàng)目

安裝@vue/cli

npm install @vue/cli -g
 或 yarn global add @vue/cli

創(chuàng)建項(xiàng)目

vue create 項(xiàng)目名

可以選擇Vue3的配置進(jìn)行項(xiàng)目初始化

在這里插入圖片描述

初始化完成后，安裝vue-router，目前安裝的版本是^4.0.0-rc.2
在 /src/router/index.js 中創(chuàng)建路由配置：

import { createRouter, createWebHashHistory } from 'vue-router'

const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')

const constantRoutes = [
 {
  path: '/v3-demo',
  component: Test
 }
]

// https://www.npmjs.com/package/vue-router
const router = createRouter({
 history: createWebHashHistory(),
 routes: constantRoutes,
})

export default router

安裝elment-plus（element-ui的3.x 版初體驗(yàn)），目前版本是^1.0.1-alpha.14

main.js引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

5.package.json的依賴包版本

 "dependencies": {
  "core-js": "^3.7.0",
  "element-plus": "^1.0.1-alpha.14",
  "vue": "^3.0.0",
  "vue-router": "^4.0.0-rc.2"
 }

效果

在這里插入圖片描述

到此這篇關(guān)于vue3.0+vue-router+element-plus初實(shí)踐的文章就介紹到這了,更多相關(guān)vue3.0 element-plus內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實(shí)現(xiàn)點(diǎn)擊其他區(qū)域關(guān)閉自定義div功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁(yè)端標(biāo)準(zhǔn)ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
將 vue 生成的 js 上傳到七牛的實(shí)例
本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
如何快速上手Vuex
本文主要介紹了Javascript中Vuex的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
vue2.0 中#$emit,$on的使用詳解
這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下
2017-06-06
element-ui 表格數(shù)據(jù)時(shí)間格式化的方法
這篇文章主要介紹了element-ui 表格數(shù)據(jù)時(shí)間格式化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
詳解VUE調(diào)用本地json的使用方法
這篇文章主要介紹了VUE調(diào)用本地json的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue 過(guò)濾器和自定義指令的使用
本文主要介紹Vue.js中過(guò)濾器和自定義指令相關(guān)的知識(shí)點(diǎn)，包括過(guò)濾器的定義方式，和使用方法，以及自定義指令的概念和注冊(cè)方式。
2021-05-05
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開(kāi)發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-05-05
在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
idea竟然有一個(gè)神功能很多朋友都不是特別清楚，下面小編給大家?guī)?lái)了在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟，感興趣的朋友一起看看吧
2021-10-10