首页 > 其他分享 >vue 前端配置

vue 前端配置

时间:2024-05-15 20:01:41浏览次数:22  
标签:cookies axios settings 前端 配置 js vue import main

前端配置

1 axios

  • 安装
cnpm install axios -S
  • main.js
import axios from 'axios'
Vue.prototype.$axios=axios

2 elementui

  • 安装
cnpm install element-ui -S
  • main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3 cookies

  • 安装
cnpm install vue-cookies -S
  • main.js
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

4 写个settings.js

const BASE_URL='http://127.0.0.1:8000/api/v1/'
export default {
    banner:BASE_URL+'/home/banner/',
}
  • main.js
    import settings from "@/assets/js/settings";
    Vue.prototype.$settings=settings
  • 再组件中使用
    methods:{
    getdata(){
    async function a(){
    let response=await this.$axios(this.$settings.banner)

    methods:{
        getdata(){
            async function a(){
                let response=await 			           this.$axios(this.$settings.banner
                }
        }
    }
    

5 去掉默认样式

  • global.css 声明全局样式和项目的初始化样式
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}
  • main.js中 全局css
import '@/assets/css/global.css'

标签:cookies,axios,settings,前端,配置,js,vue,import,main
From: https://www.cnblogs.com/unrealqcc/p/18194585

相关文章

  • vue3 pinia
    pinia状态管理器,统一状态管理,组件间通信state、getter和action,我们可以假设这些概念相当于组件中的data、computed和methods1安装npminstallpinia2在store/xx.js,写入代码,可以定义多个import{defineStore}from"pinia";exportconstuseCountStore=defineS......
  • vue3的入门--setup
    代码量:200行以上博客量:1时间:2h vue2中的data和methods可以与setup并列写,但是:data和methods可以利用this调用setup中的数据而,setup中,不能调用data和methods中的数据<!--Person.vue--><template><divclass="person"><h2>姓名:{{name}}</h2>&......
  • 视频智能检测AI智能分析网关V4告警消息推送:公众号消息推送的配置步骤介绍
    TSINGSEE青犀智能分析网关V4属于高性能、低功耗的软硬一体AI边缘计算硬件设备,目前拥有3种型号(8路/16路/32路),支持Caffe/DarkNet/TensorFlow/PyTorch/MXNet/ONNX/PaddlePaddle等主流深度学习框架。硬件内部署了近40种AI算法模型,算力高达17.6/32Tops的INT8峰值算力,2.2T的FB32高精度算......
  • Harbor怎么修改域名配置
    Harbor修改访问域名配置修改harbor.yml配置文件#/opt/harbor/harboy.yml修改域名设置生效#./install.sh直接修改配置文件在harbor根目录#common/config/core/env#common/config/registry/config.yml重启docker生效#docker-composedown#docker-comp......
  • vue监听事件实例
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例-菜鸟教程(runoob.com)</title><scriptsrc="https://cdn.staticfile.net/vue/2.4.2/vue.min.js"></script></he......
  • Vue3 vue-grid-layout布局添加右键事件
    示例code<template><divclass="dashboard-container"><ulclass='contextmenu'v-show="menuConfig.visible":style="{left:menuConfig.left+'px',top:menuConfig.top+'px'}">......
  • vue3 前端大屏项目适配方法
    1scale()方法//屏幕内的内容//样式部分.contain{width:100vw;height:200vh;background:url(.pic);backgrouns-size:cover}.screen{display:inline-block;width:1920px;//设计稿的宽度height:1080px;//设计稿的高度transform-origin:l......
  • Nginx配置允许跨域
    要在Nginx中配置允许跨域(Cross-OriginResourceSharing,CORS),你需要修改Nginx的配置文件(通常是nginx.conf或者某个包含在nginx.conf中的单独的配置文件)。下面是一个基本的例子,展示了如何在Nginx中设置CORS:打开你的Nginx配置文件。这通常是/etc/nginx/nginx.conf或者/etc/nginx......
  • git配置了 .gitignore 文件,但是不生效
    方法一.gitignore中已经标明忽略的文件目录下的文件,gitpush的时候还会出现在push的目录中,或者用gitstatus查看状态,想要忽略的文件还是显示被追踪状态。原因是因为在git忽略目录中,新建的文件在git中会有缓存,如果某些文件已经被纳入了版本管理中,就算是在.gitignore中已经声明了......
  • vue---移动端登录页面
    最近在用vue做移动端,做了一个好看的移动端登录界面,保存一下,以后方便直接使用。具体代码:<template><divclass="main-login-container"><divclass="login-top"><imgclass="img":src="logintop"></div><divclass=&q......