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

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

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

相关推荐
QQ_43766431425 分钟前
C++11 右值引用 Lambda 表达式
java·开发语言·c++
永卿00125 分钟前
设计模式-迭代器模式
java·设计模式·迭代器模式
誰能久伴不乏33 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
mykyle42 分钟前
Elasticsearch-ik分析器
大数据·elasticsearch·jenkins
慕y2741 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
midsummer_woo1 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端
Goona_1 小时前
拒绝SQL恐惧:用Python+pyqt打造任意Excel数据库查询系统
数据库·python·sql·excel·pyqt
_Aaron___1 小时前
面向对象的三大特性---多态
java
Kiri霧2 小时前
IntelliJ IDEA
java·ide·kotlin·intellij-idea
weixin_lynhgworld2 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序