html 中的一些知识

叁歲伎倆 2023-06-12 06:25 82阅读 0赞

这个是文本多余显示。。。的方法

white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

安装 element

npm i element-ui -S

然后在main.js 添加就好了

vue使用的操作main.js 的一些

import Vue from 'vue'
    import App from './App.vue'
    
    import router from "./router";
    import store from './store/index.js'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import "./assets/css/normalize.css"
    import $ from "jquery"
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import VueParticles from 'vue-particles'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(mavonEditor)
    Vue.use(VueAwesomeSwiper)
    Vue.use(VueParticles)
    Vue.use(ElementUI)
    
    
    Vue.config.productionTip = false
    
    new Vue({
        router,
        store,
        render: h => h(App),
    }).$mount('#app')

vue-store,存放的是vue关于全局的变量

import Vue from 'vue';
    import Vuex from 'vuex';
    
    
    Vue.use(Vuex);
    const store = new Vuex.Store({
        state:{
            counter:1000
        },
        mutations:{
            addStore(state){
                state.counter++;
            }
        },
        getters:{
            kk(state){
                return state.counter*5
            }
        }
    
    })
    
    export default store;

vue-router的使用，vue中的路由

import Vue from "vue"
    import VueRouter from "vue-router";
    
    Vue.use(VueRouter);
    
    const main = () => import("../views/main/kk")
    const pro = () => import("../views/profile/profile")
    const funny = () => import("../views/funny/funny")
    const study = () => import("../views/study/study")
    const grow = () => import("../views/grow/grow")
    
    const routes = [
        {
            path: "",
            redirect: "/main"
        },
        {
            path: "/main",
            component: main
        }, {
            path: "/study",
            component: study
        }, {
            path: "/funny",
            component: funny
        }, {
            path: "/profile",
            component: pro
        }, {
            path: "/grow",
            component: grow
        }
    ]
    const router = new VueRouter({
        routes: routes,
    
    })
    export default router

vue中 axios的配置

import axios from 'axios'
    
    export function request(config) {
            //创建实例
            const instance = axios.create({
                baseURL: "http://localhost:8080",
                timeout: 5000,
                headers:{
                    "Access-Control-Allow-Headers":"Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild",
                    "Access-Control-Allow-Origin": "*",
                    'Content-Type': "application/json;charset=utf-8"
    
                }
            })
    
              //    发送真正的请求
          return  instance(config)
    }

这个是 页面中markdown 的用法

<template>
        <div>
            <mavon-editor v-model="value"/>
        </div>
    </template>
    
    <script>
        export default {
            name: "markdown",
            data() {
                return {
                    value: '',
                    defaultData: "preview"
                };
            },
        };
    </script>
    
    <style scoped>
    
        mavon-editor {
            height: 1000px;
            width: 100%;
        }
    </style>

这个是vue代理的酷炫背景

<vue-particles
                    color="#dedede"
                    :particleOpacity="0.7"
                    :particlesNumber="80"
                    shapeType="circle"
                    :particleSize="4"
                    linesColor="#dedede"
                    :linesWidth="1"
                    :lineLinked="true"
                    :lineOpacity="0.4"
                    :linesDistance="150"
                    :moveSpeed="3"
                    :hoverEffect="true"
                    hoverMode="grab"
                    :clickEffect="true"
                    clickMode="push"
                    class="lizi"
            >
    </vue-particles>