vue-cil项目笔记

vue-cil项目笔记

一款vue全家桶、vuex、vuex持久化、vue-i18n国际化等技术的vue项目基础的脚手架。

包括组件header、slidebar

vue-cli 项目搭建

1. 创建项目

vue3.0以上创建项目方式

vue create vue-demo

2. 使用Ant Design

https://www.antdv.com/docs/vue/introduce-cn/

2.1 安装用Ant Design

cnpm i ant-design-vue -S

或者

yarn add ant-design-vue

2.2 按需加载使用Ant Design

• 使用 babel-plugin-import（推荐）。

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

cnpm i babel-plugin-import -S

创建.babelrc

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}

然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

2.3 引入layout布局

在App.vue中，使用a-layout标签，script里面引入layout组件并使用。

<template>
  <div id="app">
      <a-layout>
          <a-layout-content style="border-top: 0.06rem solid #edeef3;">
              <Main/>
          </a-layout-content>
      </a-layout>
  </div>
</template>

<script>
  import {Layout} from 'ant-design-vue';


  export default {
    name: 'App',
    components: {
      aLayout: Layout,
      aLayoutContent: Layout.Content,
    }

  }
</script>

2.4 安装less环境

cnpm i less less-loader -S

3.页面构建

3.1创建Main组件

在components中创建layout文件夹，在这下面新建main文件夹

main.vue中引入路由router-view

    <div class="main">
        <router-view v-if="isShow"/>
    </div>

3.2创建sidebarTop组件

使用antd的
a-layout-header

<div class="sidebar-top">
        <a-layout-header class="header">
            <div class="header-top-left">
        </a-layout-header>
    </div>

3.3创建sidebarLeft组件

使用antd的
a-layout-sider

:trigger=“null” 自定义触发器
collapsible 是否可收起

    <div class="sidebar-left">
        <a-layout-sider
            :trigger="null"
            collapsible
            v-model="isCollapse"
        >
        </a-layout-sider>
    </div>

创建侧边栏菜单