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

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>