2、idea-vue项目导入ElementUI、Router(路由)

文章目录

  • 一、导入ElementUI
    • 1、点击下图的红箭头位置,执行 npm install element-ui
    • 2、在main.js中配置
      • 具体配置
    • 3、在App.vue中使用elementui组件
      • 参考代码
  • 二、导入Router(路由)
    • 1、点击下图的红箭头位置,执行npm install vue-router
    • 2、、 在main.js中配置
    • 3、配置router.js
      • 3-1、创建router相关文件
      • 3-2、创建page文件,里面方vue文件
      • 3-3、配置router.js
      • 3-4、修改main.js配置
    • 4、配置好了之后

一、导入ElementUI

1、点击下图的红箭头位置,执行 npm install element-ui

2、idea-vue项目导入ElementUI、Router(路由)_第1张图片

2、在main.js中配置

具体配置

import ElementUI from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//说明:在import 到from 之间的名字可以随便命名,建议规范命名

2、idea-vue项目导入ElementUI、Router(路由)_第2张图片

3、在App.vue中使用elementui组件

参考代码

<template>
	<div id="app">
		<el-button>按钮el-button>
	div>
template>
<script>
export default{
	name:'App'
}
script>

2、idea-vue项目导入ElementUI、Router(路由)_第3张图片

二、导入Router(路由)

1、点击下图的红箭头位置,执行npm install vue-router

2、idea-vue项目导入ElementUI、Router(路由)_第4张图片

2、、 在main.js中配置

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、配置router.js

3-1、创建router相关文件

在src下面创建一个router文件夹,在该文件夹下面创建router.js

3-2、创建page文件,里面方vue文件

2、idea-vue项目导入ElementUI、Router(路由)_第5张图片2、idea-vue项目导入ElementUI、Router(路由)_第6张图片2、idea-vue项目导入ElementUI、Router(路由)_第7张图片

3-3、配置router.js

//导入路由
import VueRouter from "vue-router";
//配置路由
let router = new VueRouter({
    routes:[
        {path: '/',redirect:"/index"},//默认页
        //这里的path就是映射,import里面的就是要映射的 vue文件
        //配置好了之后在域名后面直接添加 /index 就可以访问page/index.vue了
        {path:'/index',component:() => import("@/page/index")},
        {path: '/login',component:() => import("@/page/login")}
    ],
    model:history
})
//最后一定要导出路由,在main.js中还需要这个router对象
export default router

3-4、修改main.js配置

2、idea-vue项目导入ElementUI、Router(路由)_第8张图片

4、配置好了之后

启动项目,访问
http://localhost:8080/login
http://localhost:8080/index
注意我这个链接只是作为参考,具体的链接还要看自己的控制台

2、idea-vue项目导入ElementUI、Router(路由)_第9张图片

你可能感兴趣的:(vue,vue)