vue3中element-plus router的使用方式
更新時(shí)間：2024年03月18日 08:59:23 作者：奧子
這篇文章主要介紹了vue3中element-plus router的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 element-plus router 使用
element plus 引入使用
//運(yùn)行 安裝 element-plus
npm install element-plus --save
//運(yùn)行之后再 package.json 查看是否安裝成功
"dependencies": {
"element-plus": "^2.2.6",
"vue": "^3.2.8"
}
//man.js 引入使用element plus 全部代碼塊全部粘貼 建議剛安裝vue3 直接復(fù)制下面代碼即可
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).use(ElementPlus).mount('#app')
//頁面 使用
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
//注意當(dāng)我們使用特定的element-plus 組件時(shí)需要單獨(dú)引入 如 ElMessage 消息提醒，使用前先引入
//import { ElMessage } from 'element-plus' ; 消息提示 復(fù)制
router 路由使用
//運(yùn)行安裝 router
npm install vue-router@4
//查看是否安裝成功
"dependencies": {
"element-plus": "^2.2.6",
"vue": "^3.2.8",
"vue-router": "^4.0.16"
}
//新建 文件夾view 和 router 文件 結(jié)構(gòu)
//index.js 文件
//引入 vue router
import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
//routes 文件
const routes = [
{
name: 'index',
path: '/index',
component: () => import('/src/view/index.vue')
},
{
name: 'info',
path: '/info',
component: () => import('/src/view/info.vue')
},
];
export default routes;
//man.js 引入
import router from './router/index';
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router/index';
//多個(gè)可以使用 use鏈接使用
createApp(App).use(ElementPlus).use(router).mount('#app')
//app vue 使用 router-view 一定要加 不加不顯示路由頁面
<template>
<router-view></router-view>
</template>
//在需要跳轉(zhuǎn)的頁面 /傳參 引入 注冊(cè) router
<script setup>
import {useRouter } from "vue-router";
const router = useRouter();
const PathUrl = (param)=>{
router.push('/'+param+'?id=1'+'&ids=2')
}
</script>
<template>
<el-button type="primary" @click="PathUrl('index')">跳轉(zhuǎn)Index</el-button>
<el-button type="success" @click="PathUrl('info')">跳轉(zhuǎn)info</el-button>
</template>
//router 接收參數(shù)
<script setup>
import {useRoute } from "vue-router";
const paramRoute = useRoute();
console.log(paramRoute,paramRoute.query.id || '')
</script>
vue3怎么使用element-plus和vant3
element-plus
安裝配置
全局引入
npm install element-plus --save
在main.ts引入
import { createApp, Vue } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
//如果要多次引入 這樣來寫
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
//如果要多次引入 這樣來寫
app.use(router).use(createPinia()).use(ElementPlus).mount('#app')
使用
這里使用的是按鈕
<el-row> <el-button>默認(rèn)按鈕</el-button> <el-button type="primary">主要按鈕</el-button> <el-button type="success">成功按鈕</el-button> <el-button type="info">信息按鈕</el-button> <el-button type="warning">警告按鈕</el-button> <el-button type="danger">危險(xiǎn)按鈕</el-button> </el-row>
局部引入
- 按需導(dǎo)入
- 自動(dòng)導(dǎo)入組件以及樣式[推薦】
1.安裝插件
npm install element-plus --save
2.安裝自動(dòng)導(dǎo)入插件
npm install -D unplugin-vue-components unplugin-auto-import
3.配置vue.config.js（其他配置方式看官網(wǎng)）
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
},
//配置webpack自動(dòng)按需引入element-plus，
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
}
};
4.直接使用
<template>
<div id="app">
<el-row class="mb-4">
<el-button disabled>Default</el-button>
<el-button type="primary" disabled>Primary</el-button>
<el-button type="success" disabled>Success</el-button>
<el-button type="info" disabled>Info</el-button>
<el-button type="warning" disabled>Warning</el-button>
<el-button type="danger" disabled>Danger</el-button>
</el-row>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
})
</script>
<style lang="less">
</style>
vant3
安裝配置
全局引入
第一步
npm i vant@next -S
第2步(可寫可不寫)
babel.comfig.js根目錄有就直接添加,
沒有就去創(chuàng)建 然后寫入以下代碼
plugins:[
['import',{
libaryName:'vant',
libaryDirectory:'es',
style:true
},'vant']
]
第3步
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'
import Vant from 'vant'
import './styles/index.less'
createApp(App).use(store).use(router).use(Vant).mount('#app')
最后
在對(duì)于頁面進(jìn)行使用
<template>
<div id='app'>
<van-button size="small" type="primary">Primary</van-button>
<van-button type="info">Info</van-button>
<van-button type="default">Default</van-button>
<van-button type="danger">Danger</van-button>
<van-button type="warning">Warning</van-button>
<router-view/>
</div>
</template>
<style lang="less"></style>
局部引入
npm i vant@next -S
在main.ts里面這樣寫入 記得不要忘記引入css
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './style/reset.css'//vue3的resets必須在style里引入
//3的話引入reset.css需要在src里創(chuàng)建style 寫入引入
// 不要在assets里創(chuàng)建css 寫入引入 會(huì)報(bào)錯(cuò)
// 需是在style的里面
// 局部引入vant
import 'vant/lib/index.css'
import { Swipe, SwipeItem, Toast, Field, Button, Cell, CellGroup, Tabbar, TabbarItem, Lazyload } from 'vant';
export const app = createApp(App)
app.use(Swipe).use(Lazyload).use(SwipeItem).use(Field).use(Toast).use(Button).use(Cell).use(CellGroup).use(Tabbar).use(TabbarItem)
app.use(store).use(router).mount('#app')
然后后期需要添加哪個(gè)就引用哪個(gè) 直接在需要的頁面使用就可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue頁面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的方法
這篇文章主要介紹了vue頁面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能
這篇文章主要介紹了vue調(diào)用本地?cái)z像頭實(shí)現(xiàn)拍照功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue3中父組件訪問子組件中的屬性和方法是需要借助于ref,蘇哦一本文小編給大家介紹了vue3父組件如何使用ref獲取獲取子組件的屬性和方法,文中詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
vue的el-select綁定的值無法選中el-option問題及解決
這篇文章主要介紹了vue的el-select綁定的值無法選中el-option問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue使用el-select下拉框匹配不到值的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解
這篇文章主要為大家介紹了Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名
這篇文章主要介紹了微信小程序如何像vue一樣在動(dòng)態(tài)綁定類名,文中給大家提到了vue與微信小程序的區(qū)別，需要的朋友可以參考下2018-04-04
基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02