vue2项目的基本搭建（以后台为例)

一、使用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

注意：三级路由就在二级页面以及二级路由继续弄

这样基本的结构就搭建完了