美文网首页
Vue ui初始化项目并使用iview写一个菜单导航

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

作者: zhd______ | 来源:发表于2021-08-24 11:05 被阅读0次

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

    相关文章

      网友评论

          本文标题:Vue ui初始化项目并使用iview写一个菜单导航

          本文链接:https://www.haomeiwen.com/subject/kprsiltx.html