win+R
输入命令
vue ui
浏览器会自动打开http://localhost:8000/
找到创建

选择一个目录创建vue项目

点击再此创建新项目

我一般都是再已经有git仓库的目录进行项目创建,所以这个勾去掉
点击下一步

这里可以选择默认,我这边选择手动,方便以后初始化项目时不用每次去配


把常用的几个插件都打上勾

给预设设置一个名称

将我们初始化的项目跑起来

成功
使用iview写一个示例



添加一个前端框架,这里选择iview,依赖和插件都装一下

配置插件
第一个是按需引入或者全局引入,为了方便一般都全局引入
第二个是如果自定义主题颜色时需要打开,正常情况下都不需要
定制主题

第二个勾上就会多这个文件,用户定制主题,可以将示例的@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文件,内容随便填

修改路由 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')
网友评论