html 中的一些知识

 

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

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>