vue-cil项目笔记

た入场券 2022-12-29 00:30 121阅读 0赞

### 文章目录 ###

*  vue-cil项目笔记
 *   *  vue-cli 项目搭建
     *   *  1. 创建项目
         *  2. 使用Ant Design
         *   *  2.1 安装用Ant Design
             *  2.2 按需加载使用Ant Design
             *  2.3 引入layout布局
             *  2.4 安装less环境
         *  3.页面构建
         *   *  3.1创建Main组件
             *  3.2创建sidebarTop组件
             *  3.3创建sidebarLeft组件

# 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

#### 3.2创建sidebarTop组件 ####

使用antd的  
a-layout-header

#### 3.3创建sidebarLeft组件 ####

使用antd的  
a-layout-sider

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

创建侧边栏菜单