一、使用vue-cli搭建vue2项目
主要还是跟着vue-cli文档来
步骤:
①vue create 项目名称
②选择搭建vue的模式(这里我选择自定义Manually)
③选择基本配置(这里我选择 Router、vuex、css解析器
④选择版本(这里选择2版本)
⑤后面的选项要么回车,要么选择想要的配置(就比
如less开发模式,In package.json )
二、安装依赖包
这里先安装主要的,看文档来(axios、element-ui)
①安装axios
npm install axios //安装
然后看文档配置xiaos
②安装element-ui
npm i element-ui -S //安装
然后看文档配置组件库
三、配置项目
在src目录下:
①assets存放静态资源
在该目录下,创建css文件夹=>创建.css文件,把公共css样式放里面,然后再main.js引入
②在App.vue做整个项目的路由出口
<template>
<div id="app">
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default{
name: 'app',
}
</script>
<style lang="less">
</style>
③分析页面,在views创建页面(页面结构快捷键vbs)
这里(已易购商城后台为例),创建了登录页Login,主页面基本骨架Layout=>在Layout文件夹下创建了Content.vue(内容区域)、layout.vue(基本骨架)、MyMenu.vue(导航菜单)三个vue文件。
对layout.vue文件引入其它两个组件,形成页面骨架
<template>
<div class="layout">
<!-- 左侧菜单栏 -->
<MyMenu class="menu">
</MyMenu>
<!-- 右侧内容区 -->
<Content class="content"></Content>
</div>
</template>
<script>
import MyMenu from './MyMenu'
import Content from './Content'
export default {
components: {
MyMenu,
Content
},
}
</script>
<style lang="less" scoped>
.layout{
position: relative;
//导航栏menu固定定位在左边,这样就没有滚动条
.menu{
position:fixed;
bottom:0;
top:0;
min-height:500px;
width: 200px;
background: #4a73be;
}
//右边内容区域
.content{
margin-left: 200px;
background: #1e78bf;
}
}
</style>
对menu.vue编写页面骨架左边导航栏
对Content.vue编写页面骨架右边内容区域,这里可以分为头部和内容路由切换
<template>
<!-- 内容区域-->
<div class="content">
<div class="header">头部</div>
<!--路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.content{
.header{
height: 50px;
line-height: 50px;
background-color: #1e78bf;
}
}
</style>
最后,创建其余的内容路由页面(这里有登录页、基本架构|一级路由|、首页、广告、商品管理、订单管理、规格参数、用户|二级路由|)
④搭建路由,在router=>index.js配置
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入组件(一级)
import Layout from '@/views/layout/layout.vue'
import Login from '@/views/login/login.vue'
// 登录默认显示home首页,二级路由
import Home from '@/views/Home/home.vue'
// 异步(二级)
// 商品管理
const Goods=()=>import('@/views/Goods/Goods.vue')
//规格参数
const Params=()=>import('@/views/Params/Params.vue')
// 广告
const Advert=()=>import('@/views/Advert/Advert.vue')
// 订单管理
const Order=()=>import('@/views/Order/Order.vue')
//用户
const User=()=>import('@/views/User/User.vue')
Vue.use(VueRouter)
const routes = [
// 一级路由layout
{
path:'/',
component: Layout,
// 路由重定向
redirect:'/home',
// 二级路由
children:[
{
path:'/home',
name:'Home',
component:Home
},
{
path:'/goods',
name:'Goods',
component:Goods,
},
{
path:'/params',
name:'Params',
component:Params
},
{
path:'/advert',
name:'Advert',
component:Advert
}, {
path:'/order',
name:'Order',
component:Order
},
{
path:'/user',
name:'User',
component:User
},
]
},
// 一级路由登录
{
path: '/login',
component: Login,
name: 'Login',
},
]
const router = new VueRouter({
routes
})
export default router
注意:三级路由就在二级页面以及二级路由继续弄
这样基本的结构就搭建完了