elementUI-day01----elementUI的使用、elementUI配置项、SliderTabBar.vue渲染、SliderTabBar.vue默认选中、路由切换、项目登录-mock数据模拟后台登录接口

### 项目搭建

    vue create my_cms
    Babel Router Vuex CSS
    Use history mode for router?    n
    Sass/SCSS (with dart-sass)
    In package.json
    Save this as a preset for future projects?      n

 

### 安装插件

    npm i element-ui axios js-cookie mockjs
    npm install babel-plugin-component -D　　----按需引入

 

### elementUI的使用

    ①安装插件：

        npm i element-ui
        npm install babel-plugin-component -D

    ②配置babel.config.js（按需加载，修改完要重启）：

        "plugins": [
            [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
            ]
        ]

    ③src下新建common/components/index.js，完整组件列表和引入方式（实际工作中按需引入）：

        import Vue from 'vue';
        import {
        Pagination,
        Dialog,
        Autocomplete,
        Dropdown,
        DropdownMenu,
        DropdownItem,
        Menu,
        Submenu,
        MenuItem,
        MenuItemGroup,
        Input,
        InputNumber,
        Radio,
        RadioGroup,
        RadioButton,
        Checkbox,
        CheckboxButton,
        CheckboxGroup,
        Switch,
        Select,
        Option,
        OptionGroup,
        Button,
        ButtonGroup,
        Table,
        TableColumn,
        DatePicker,
        TimeSelect,
        TimePicker,
        Popover,
        Tooltip,
        Breadcrumb,
        BreadcrumbItem,
        Form,
        FormItem,
        Tabs,
        TabPane,
        Tag,
        Tree,
        Alert,
        Slider,
        Icon,
        Row,
        Col,
        Upload,
        Progress,
        Spinner,
        Badge,
        Card,
        Rate,
        Steps,
        Step,
        Carousel,
        CarouselItem,
        Collapse,
        CollapseItem,
        Cascader,
        ColorPicker,
        Transfer,
        Container,
        Header,
        Aside,
        Main,
        Footer,
        Timeline,
        TimelineItem,
        Link,
        Divider,
        Image,
        Calendar,
        Backtop,
        PageHeader,
        CascaderPanel,
        Loading,
        MessageBox,
        Message,
        Notification
        } from 'element-ui';

        Vue.use(Pagination);
        Vue.use(Dialog);
        Vue.use(Autocomplete);
        Vue.use(Dropdown);
        Vue.use(DropdownMenu);
        Vue.use(DropdownItem);
        Vue.use(Menu);
        Vue.use(Submenu);
        Vue.use(MenuItem);
        Vue.use(MenuItemGroup);
        Vue.use(Input);
        Vue.use(InputNumber);
        Vue.use(Radio);
        Vue.use(RadioGroup);
        Vue.use(RadioButton);
        Vue.use(Checkbox);
        Vue.use(CheckboxButton);
        Vue.use(CheckboxGroup);
        Vue.use(Switch);
        Vue.use(Select);
        Vue.use(Option);
        Vue.use(OptionGroup);
        Vue.use(Button);
        Vue.use(ButtonGroup);
        Vue.use(Table);
        Vue.use(TableColumn);
        Vue.use(DatePicker);
        Vue.use(TimeSelect);
        Vue.use(TimePicker);
        Vue.use(Popover);
        Vue.use(Tooltip);
        Vue.use(Breadcrumb);
        Vue.use(BreadcrumbItem);
        Vue.use(Form);
        Vue.use(FormItem);
        Vue.use(Tabs);
        Vue.use(TabPane);
        Vue.use(Tag);
        Vue.use(Tree);
        Vue.use(Alert);
        Vue.use(Slider);
        Vue.use(Icon);
        Vue.use(Row);
        Vue.use(Col);
        Vue.use(Upload);
        Vue.use(Progress);
        Vue.use(Spinner);
        Vue.use(Badge);
        Vue.use(Card);
        Vue.use(Rate);
        Vue.use(Steps);
        Vue.use(Step);
        Vue.use(Carousel);
        Vue.use(CarouselItem);
        Vue.use(Collapse);
        Vue.use(CollapseItem);
        Vue.use(Cascader);
        Vue.use(ColorPicker);
        Vue.use(Transfer);
        Vue.use(Container);
        Vue.use(Header);
        Vue.use(Aside);
        Vue.use(Main);
        Vue.use(Footer);
        Vue.use(Timeline);
        Vue.use(TimelineItem);
        Vue.use(Link);
        Vue.use(Divider);
        Vue.use(Image);
        Vue.use(Calendar);
        Vue.use(Backtop);
        Vue.use(PageHeader);
        Vue.use(CascaderPanel);

        Vue.use(Loading.directive);

        Vue.prototype.$loading = Loading.service;
        Vue.prototype.$msgbox = MessageBox;
        Vue.prototype.$alert = MessageBox.alert;
        Vue.prototype.$confirm = MessageBox.confirm;
        Vue.prototype.$prompt = MessageBox.prompt;
        Vue.prototype.$notify = Notification;
        Vue.prototype.$message = Message;

    ④main.js中引入：

        import "@common/components/index.js";

    ⑤pages/Layout/index.vue中可以直接用elementUI的组件：

        <el-container>
            <el-aside width="200px">
                <SliderTabBar /> 
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>
                    <Container />
                </el-main>
            </el-container>
        </el-container>

 

### elementUI配置项

    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
        <!-- 二级路由 -->
        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
            <el-menu-item index="1-4-2">选项1</el-menu-item>
            <el-menu-item index="1-4-3">选项1</el-menu-item>
        </el-submenu>

        <!-- 没有子标题 -->
        <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
    </el-menu>

 

    注解：

        1、el-menu标签：包裹菜单栏

        2、el-submenu标签：包裹二级路由

        3、el-menu-item标签：只有自己，没有子级

        4、template标签：二级路由的标题

 

        配置项：

            default-active="2"          默认选中的index项 

            @open="handleOpen"          打开的时候触发的函数

            @close="handleClose"        关闭的时候触发的函数

            active-text-color="#ffd04b" 选中文字的颜色

### SliderTabBar.vue渲染

    <template v-for="item in sliders">
        <!-- 二级路由 -->
        <el-submenu :index="item.path" :key="item.path" v-if="item.children&&item.children.length>0">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
            <el-menu-item index="1-4-2">选项1</el-menu-item>
            <el-menu-item index="1-4-3">选项1</el-menu-item>
        </el-submenu>

        <!-- 没有子标题 -->
        <el-menu-item :index="item.path" :key="item.path" v-else>
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </el-menu-item>
    </template>

 

    注意：  

        1、导航的配置项一般是后端返回的，不是前端写死的。

        2、***因为有的导航带子级路由，有的导航不带，在遍历的时候需要区分开来，可以用v-if搭配v-else使用，而v-if的优先级低于v-for，它俩不能一起用，所以在外层嵌套一层template标签用于做遍历。

        3、index是唯一标识，相当于key值。

        4、如果要使用字体图标就在前面加上i标签：<i :class="item.icon"></i>

 

### SliderTabBar.vue默认选中

    ①data中定义defaultActive变量为 /home：

        defaultActive:"/home",

    ②设置default-active的默认值为defaultActive：

        :default-active="defaultActive"

    ③*watch监听路由跳转对象：

        watch: {
            "$route":{
                handler(newValue,oldValue){
                    this.defaultActive=newValue.path;
                },
                immediate:true
            }
        }

 

### 路由切换

    SliderTabBar.vue页面，在el-menu-item标签中添加点击事件，用编程式导航跳转路由。

    ①如果有子级路由则添加 @click="handlePush(child.path)"

     如果没有子级路由则添加 @click="handlePush(item.path)"

    ②事件函数：

        methods: {
            handlePush(path){
                this.$router.push(path);
            }
        }

 

### 项目登录-mock数据模拟后台登录接口

    ①utils下新建utils.js，导出quertObject()方法，用于将url地址栏参数转成对象格式：

        export const quertObject=(url)=>{
            let queryString=url.split("?")[1];
            let obj={};
            let arr=queryString.split("&");
            for(let i=0;i<arr.length;i++){
                let key=arr[i].split("=")[0];
                let value=arr[i].split("=")[1];
                obj[key]=value;
            }
            return obj;
        }

    ②src下新建mock/index.js，模拟后端接口，定义url、请求方式为get，判断username和password是否正确：

        import Mock from "mockjs";
        import {quertObject} from "@utils/utils.js";

        /*
            登录接口
        */
        Mock.mock(/\/user\/login/,"get",(options)=>{
            let obj=quertObject(options.url);
            if(obj.username=="admin"&&obj.password=="admin"){
                return {
                    code:200,
                    data:{
                        authToken:"adfadfasf"                    }
                }
            }else{
                return{
                    code:500,
                    data:{
                        info:"用户名或密码不正确"
                    }
                }
            }
        })

    ③定义完mock数据后一定要在main.js中引入mock：

        import "@mock/index.js";

    ④utils下新建request.js，进行axios拦截：

        import axios from "axios";
        // import loading from "@plugins/Loading/index.js";
        import Vue from 'vue';
        // import loading from ""
        console.log(Vue)

        const http=axios.create({
            timeout:5000,
            withCredentials:true,// 允许携带token
            // baseUrl:""
        });

        http.interceptors.request.use(config=>{
            if(config.method=="get"){
                config.params={...config.data};
            }
            // config.headers["authToken"]=store.token;
            // 开启loading
            // loading.show();
            return config;
        },(err)=>{
            return Promise.reject(err);
        });

        http.interceptors.response.use(config=>{
            if(config.status==200){
                // 关闭loading
                // loading.hide();
                return config.data;
            }
        },(err)=>{
            return Promise.reject(err);
        });

        export default http;

    ⑤api下新建request.js，定义loginApi方法请求mock中的地址，请求方式为mock中定义的格式get，导出loginApi方法：

        import http from "@utils/request.js";

        export const loginApi=(loginModel)=>{
            return http({
                method:"get",
                url:"/user/login",
                data:loginModel
            })
        }

    ⑥Login/index.vue中引入loginApi方法，点击登录按钮时，进行数据请求，将当前填写的username和password带过去，判断返回值，如果code为200，则提示登录成功，并且保存authToken和进行路由的跳转：

        import { loginApi } from "@api/request.js";

        methods: {
            async handleLogin() {
                let data = await loginApi(this.login_model);
                if (data.code == 200) {
                    this.$message({
                        message: "登录成功",
                        type: "success",
                        onClose:()=>{
                            // 保存authToken
                            this.$store.commit("handleAuthToken",data.data.authToken);
                            this.$router.push("/home");
                        }
                    });
                }else{
                    this.$message.error(data.data.info);
                }
            }
        }

    ⑦store/index.js中，保存token（借助js-cookie插件）：

        import Cookies from "js-cookie";

        state:{
            authToken:Cookies.get("token")||""
        },
        mutations:{
            handleAuthToken(state,params){
                state.authToken=params;
                Cookies.set("token",state.authToken);
            }
        }