欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年12月02日 14:11:47   作者：kiscon  
這篇文章主要介紹了vue3.0+vue-router+element-plus初實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

Vue3中文文檔

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

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

初始化項目

安裝@vue/cli

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

創(chuàng)建項目

vue create 項目名

可以選擇Vue3的配置進行項目初始化

在這里插入圖片描述

初始化完成后，安裝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"
 }

效果

在這里插入圖片描述

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

相關文章

  • vue2.0實現(xiàn)點擊其他區(qū)域關閉自定義div功能

    vue2.0實現(xiàn)點擊其他區(qū)域關閉自定義div功能

    這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-06-06
  • elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解

    elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解

    element-ui 目前基本成為前端pc網(wǎng)頁端標準ui框架,下面這篇文章主要給大家介紹了關于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • 將 vue 生成的 js 上傳到七牛的實例

    將 vue 生成的 js 上傳到七牛的實例

    本篇文章主要介紹了將 vue 生成的 js 上傳到七牛的實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 如何快速上手Vuex

    如何快速上手Vuex

    本文主要介紹了Javascript中Vuex的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • vue2.0 中#$emit,$on的使用詳解

    vue2.0 中#$emit,$on的使用詳解

    這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下
    2017-06-06
  • element-ui 表格數(shù)據(jù)時間格式化的方法

    element-ui 表格數(shù)據(jù)時間格式化的方法

    這篇文章主要介紹了element-ui 表格數(shù)據(jù)時間格式化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 詳解VUE調(diào)用本地json的使用方法

    詳解VUE調(diào)用本地json的使用方法

    這篇文章主要介紹了VUE調(diào)用本地json的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • vue 過濾器和自定義指令的使用

    vue 過濾器和自定義指令的使用

    本文主要介紹Vue.js中過濾器和自定義指令相關的知識點，包括過濾器的定義方式，和使用方法，以及自定義指令的概念和注冊方式。
    2021-05-05
  • vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log

    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項目的詳細步驟

    在IDEA中Debug調(diào)試VUE項目的詳細步驟

    idea竟然有一個神功能很多朋友都不是特別清楚，下面小編給大家?guī)砹嗽贗DEA中Debug調(diào)試VUE項目的詳細步驟，感興趣的朋友一起看看吧
    2021-10-10

最新評論