快捷導(dǎo)航

vue3.0+vue-router+element-plus初實踐

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

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

Vue3中文文檔

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

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

初始化項目

安裝@vue/cli

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

創(chuàng)建項目

vue create 項目名

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

在這里插入圖片描述

初始化完成后，安裝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 版初體驗），目前版本是^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初實踐的文章就介紹到這了,更多相關(guān)vue3.0 element-plus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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