vue3中element-plus router的使用方式
作者：奥子
这篇文章主要介绍了vue3中element-plus router的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3 element-plus router 使用
element plus 引入使用
//运行 安装 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 路由使用
//运行安装 router
npm install vue-router@4
//查看是否安装成功
"dependencies": {
"element-plus": "^2.2.6",
"vue": "^3.2.8",
"vue-router": "^4.0.16"
}
//新建 文件夹view 和 router 文件 结构
//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>
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>默认按钮</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>
局部引入
- 按需导入
- 自动导入组件以及样式[推荐】
1.安装插件
npm install element-plus --save
2.安装自动导入插件
npm install -D unplugin-vue-components unplugin-auto-import
3.配置vue.config.js（其他配置方式看官网）
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()]
})
]
}
};
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根目录有就直接添加,
没有就去创建 然后写入以下代码
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')
最后
在对于页面进行使用
<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里创建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')
然后后期需要添加哪个就引用哪个 直接在需要的页面使用就可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。