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è) 直接在需要的頁面使用就可