当前位置：首页 > news >正文

Vue ui初始化项目并使用iview写一个菜单导航

news 来源：原创 2025/5/1 5:30:14

win+R
输入命令

vue ui

浏览器会自动打开http://localhost:8000/
找到创建

image.png

选择一个目录创建vue项目

image.png

点击再此创建新项目

image.png

我一般都是再已经有git仓库的目录进行项目创建，所以这个勾去掉
点击下一步

image.png

这里可以选择默认，我这边选择手动，方便以后初始化项目时不用每次去配

image.png

把常用的几个插件都打上勾

image.png

给预设设置一个名称

image.png

将我们初始化的项目跑起来

image.png

成功

使用iview写一个示例

image.png

添加一个前端框架，这里选择iview，依赖和插件都装一下

image.png

配置插件

第一个是按需引入或者全局引入，为了方便一般都全局引入
第二个是如果自定义主题颜色时需要打开，正常情况下都不需要

定制主题

image.png

第二个勾上就会多这个文件，用户定制主题，可以将示例的@primary-color去掉
https://github.com/view-design/ViewUI/blob/master/src/styles/custom.less

新建 vue.config.js

module.exports = {chainWebpack: config => {config.module.rule('vue').use('iview').loader('iview-loader').options({prefix: false})},
}

编写一个导航菜单

修改App.vue

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'app',components: {}
}
</script><style>
#app {}
</style>

修改Home.vue

<template><div><Menu active-name="1"><MenuGroup title="内容管理"><MenuItem name="1" :to="{path:'/home/menu1'}"><Icon type="md-document"/>菜单1</MenuItem><MenuItem name="2" :to="{path:'/home/menu2'}"><Icon type="md-chatbubbles" />菜单2</MenuItem></MenuGroup></Menu><router-view></router-view></div>
</template><script>export default {components: {}
}
</script>

添加两个Vue文件，内容随便填

image.png

修改路由 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const title = '网页标题'
const routes = [{path: '/',redirect: '/home/menu1',meta: {title: title},},{path: '/home',name: 'Home',component: () => import('../views/Home.vue'),meta: {title: title},children: [{path: 'menu1',component: () => import('../views/Menu1.vue'),meta: {title: title + '-菜单1'},},{path: 'menu2',component: () => import('../views/Menu2.vue'),meta: {title: title + '-菜单2'},},]}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

解决ie兼容性文件
修改 babel.config.js

module.exports = {presets: [['@vue/app', {useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]
}

修改main.js

// 解决低版本兼容性问题
import 'core-js'import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/iview.js'Vue.config.productionTip = falsedocument.title = ''
router.beforeEach((to, from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title}next()
})new Vue({router,store,render: h => h(App)
}).$mount('#app')