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

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

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

相关推荐
无敌最俊朗@18 分钟前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通19 分钟前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
拾贰_C25 分钟前
【SpringBoot】前后端联动实现条件查询操作
java·spring boot·后端
GUIQU.2 小时前
【QT】嵌入式开发:从零开始,让硬件“活”起来的魔法之旅
java·数据库·c++·qt
计算机编程小央姐6 小时前
【Spark+Hive+hadoop】基于spark+hadoop基于大数据的人口普查收入数据分析与可视化系统
大数据·hadoop·数据挖掘·数据分析·spark·课程设计
callJJ6 小时前
从 0 开始理解 Spring 的核心思想 —— IoC 和 DI(2)
java·开发语言·后端·spring·ioc·di
wangjialelele6 小时前
Linux中的线程
java·linux·jvm·c++
谷咕咕6 小时前
windows下python3,LLaMA-Factory部署以及微调大模型,ollama运行对话,开放api,java,springboot项目调用
java·windows·语言模型·llama
鲲志说7 小时前
数据洪流时代,如何挑选一款面向未来的时序数据库?IoTDB 的答案
大数据·数据库·apache·时序数据库·iotdb
没有bug.的程序员7 小时前
MVCC(多版本并发控制):InnoDB 高并发的核心技术
java·大数据·数据库·mysql·mvcc