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
安装配置
全局引入
在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.安装插件
2.安装自动导入插件
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
安装配置
全局引入
第一步
第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 > |
局部引入
在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' ) |
然后后期需要添加哪个就引用哪个 直接在需要的页面使用就可
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
适用于 Vue 的播放器组件Vue-Video-Player操作
这篇文章主要介绍了适用于 Vue 的播放器组件Vue-Video-Player操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧2022-09-09
最新评论