vue3中element-plus router的使用方式

//运行 安装 element-plus
 npm install element-plus --save
 
//运行之后再 package.json 查看是否安装成功  
 "dependencies": {
    "element-plus": "^2.2.6",
    "vue": "^3.2.8"
  }
  
//man.js 引入使用element plus  全部代码块全部粘贴 建议刚安装vue3 直接复制下面代码即可

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>

//注意当我们使用特定的element-plus 组件时需要单独引入 如 ElMessage 消息提醒，使用前先引入 
//import { ElMessage } from 'element-plus' ; 消息提示 复制

//运行安装 router 
npm install vue-router@4

//查看是否安装成功
 "dependencies": {
    "element-plus": "^2.2.6",
    "vue": "^3.2.8",
    "vue-router": "^4.0.16"
 }

//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';
//多个可以使用 use链接使用
createApp(App).use(ElementPlus).use(router).mount('#app')

//app vue 使用 router-view 一定要加 不加不显示路由页面
<template>
  <router-view></router-view>
</template>

//在需要跳转的页面 /传参 引入 注册 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')">跳转Index</el-button>
   <el-button type="success" @click="PathUrl('info')">跳转info</el-button>
</template>

//router 接收参数
<script setup>
	import {useRoute } from "vue-router";
	const paramRoute = useRoute();
	console.log(paramRoute,paramRoute.query.id || '')
</script>

npm install element-plus --save

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>默认按钮</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">危险按钮</el-button>
</el-row>

npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

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自动按需引入element-plus，
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
};

<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>

npm i vant@next -S

 plugins:[
    ['import',{
      libaryName:'vant',
      libaryDirectory:'es',
      style:true
    },'vant']
  ]

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')

<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

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里创建style 写入引入
// 不要在assets里创建css 写入引入 会报错 
// 需是在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')