vue3中element-plus router的使用方式

 更新时间:2024年03月18日 08:59:23   作者:奥子  
这篇文章主要介绍了vue3中element-plus router的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

vue3 element-plus router 使用

element plus 引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//运行 安装 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 路由使用

1
2
3
4
5
6
7
8
9
//运行安装 router
npm install vue-router@4
 
//查看是否安装成功
 "dependencies": {
    "element-plus": "^2.2.6",
    "vue": "^3.2.8",
    "vue-router": "^4.0.16"
 }

//新建 文件夹view 和 router 文件 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
//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

安装配置

全局引入

1
npm install element-plus --save

在main.ts引入

1
2
3
4
5
6
7
8
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')
1
2
3
4
5
6
7
8
9
10
//如果要多次引入 这样来写
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')

使用

这里使用的是按钮

1
2
3
4
5
6
7
8
<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.安装插件

1
npm install element-plus --save

2.安装自动导入插件

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

3.配置vue.config.js(其他配置方式看官网)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.直接使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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

安装配置

全局引入

第一步

1
npm i vant@next -S

第2步(可写可不写)

babel.comfig.js根目录有就直接添加,

没有就去创建 然后写入以下代码

1
2
3
4
5
6
7
plugins:[
   ['import',{
     libaryName:'vant',
     libaryDirectory:'es',
     style:true
   },'vant']
 ]

第3步

1
2
3
4
5
6
7
8
9
10
11
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')

最后

在对于页面进行使用

1
2
3
4
5
6
7
8
9
10
11
12
<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>

局部引入

1
npm i vant@next -S

在main.ts里面这样写入 记得不要忘记引入css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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')

然后后期需要添加哪个就引用哪个 直接在需要的页面使用就可 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_45157073/article/details/125502306

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

最新评论