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

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

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

相关推荐
飞翔的佩奇8 分钟前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
亚马逊云开发者24 分钟前
全景解读亚马逊云科技的 GenBI 解决方案:三大路径助力企业智能决策升级
sql·llm
RainbowSea26 分钟前
跨域问题(Allow CORS)解决(3 种方法)
java·spring boot·后端
掘金-我是哪吒27 分钟前
分布式微服务系统架构第155集:JavaPlus技术文档平台日更-Java线程池实现原理
java·分布式·微服务·云原生·架构
RainbowSea30 分钟前
问题 1:MyBatis-plus-3.5.9 的分页功能修复
java·spring boot·mybatis
前端 贾公子33 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
不学会Ⅳ1 小时前
Mac M芯片搭建jdk源码环境(jdk24)
java·开发语言·macos
虫小宝1 小时前
高佣金返利平台监控体系建设:APM、链路追踪与佣金异常预警系统技术实现
java
sniper_fandc2 小时前
SpringBoot系列—入门
java·spring boot·后端
代码的余温3 小时前
Maven引入第三方JAR包实战指南
java·maven·jar