vue3.0+vue-router+element-plus初實(shí)踐
更新時(shí)間：2020年12月02日 14:11:47 作者：kiscon
這篇文章主要介紹了vue3.0+vue-router+element-plus初實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
Vue3.0對(duì)比Vue2.x優(yōu)勢(shì)
- 框架內(nèi)部做了大量的性能優(yōu)化，包括：虛擬dom，編譯模板，Proxy的新數(shù)據(jù)監(jiān)聽，更小的打包文件等。
- 新增的組合式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)文章
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問題的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法
這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽事件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue組件封裝之dialog對(duì)話框組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue 中使用 vxe-table 制作可編輯表格的使用過程
這篇文章主要介紹了vue 中使用 vxe-table 制作可編輯表格的使用過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
vite的proxy查看真實(shí)請(qǐng)求地址方式詳解
這篇文章主要為大家介紹了vite的proxy查看真實(shí)請(qǐng)求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中如何把hash模式改為history模式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07