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

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

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

相关推荐
数据小吏2 小时前
第十五章:数据治理之数据目录:摸清家底,建立三大数据目录
大数据·数据库·人工智能
z人间防沉迷k3 小时前
后端开发概念
java·后端
caihuayuan53 小时前
Vue3响应式数据: 深入分析Ref与Reactive
java·大数据·spring boot·后端·课程设计
CodeWithMe4 小时前
【C/C++】线程状态以及转换
java·c语言·c++
苹果酱05674 小时前
Java设计模式:探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
biubiubiu07064 小时前
windows中JDK切换版本
java·开发语言
完美世界的一天5 小时前
ES 面试题系列「三」
大数据·elasticsearch·搜索引擎·面试·全文检索
qq_334060215 小时前
spring5-配外部文件-spEL-工厂bean-FactoryBean-注解配bean
java·spring·web
Uranus^6 小时前
使用Spring Boot和Spring Security结合JWT实现安全的RESTful API
java·spring boot·spring security·jwt·restful api
FAQEW6 小时前
介绍一下什么是反射(面试题详细讲解)
java·开发语言·反射