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

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

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

image.png

成功

使用iview写一个示例


image.png


image.png


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 = false

document.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')

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
pianmian122 分钟前
类(JavaBean类)和对象
java
我叫小白菜1 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
Albert Edison1 小时前
【最新版】IntelliJ IDEA 2025 创建 SpringBoot 项目
java·spring boot·intellij-idea
超级小忍2 小时前
JVM 中的垃圾回收算法及垃圾回收器详解
java·jvm
weixin_446122462 小时前
JAVA内存区域划分
java·开发语言·redis
勤奋的小王同学~2 小时前
(javaEE初阶)计算机是如何组成的:CPU基本工作流程 CPU介绍 CPU执行指令的流程 寄存器 程序 进程 进程控制块 线程 线程的执行
java·java-ee
TT哇2 小时前
JavaEE==网站开发
java·redis·java-ee
2401_826097622 小时前
JavaEE-Linux环境部署
java·linux·java-ee
缘来是庄3 小时前
设计模式之访问者模式
java·设计模式·访问者模式
小殷学长3 小时前
【单片机毕业设计17-基于stm32c8t6的智能倒车监测系统】
stm32·单片机·课程设计