luffy前端配置

一、全局样式及配置

1. 全局css

正常情况我们写前端项目，需要去掉所有标签的默认样式，css

第一步：在assets目录下新建目录和文件css/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'

2. 全局js

向后端发送请求，请求地址测试阶段 127.0.0.1:8000，但是后期上线，地址要变，如果在组件中把地址写死，以后上线的时候需要要改，每个都要改，很麻烦。所以写一个全局js，js中有个url地址，以后所有组件中发送请求时，都是用这个url地址

第一步：在assets目录下新建目录和文件js/settings.js

export default {
        BASE_URL:'http://127.0.0.1:8000/api/v1'
    }

第二步：在main.js中引入settings.js,把settings对象放入到vue的原型中

import settings from "@/assets/js/settings";
    Vue.prototype.$settings = settings
    
// 以后在所有需要与后台交互的组件中：this.$settings.BASE_URL+ '再拼接具体后台路由'

第三步：在任意组件中使用

this.$settings.BASE_URL
    this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
        
    })

二、axios前后端交互

1.安装 axios 模块

cnpm install -S axios  # -S 选项会将该模块加到package.json中去
cnpm install --save axios

2.为项目配置全局 axios

  • 配置：main.js
import axios from 'axios'  
// 导入安装的模块不用加相对路径

Vue.prototype.$axios = axios
// 向Vue的原型中放一个属性(key)为$axios，值为：axios
// 注意 $axios 是你自己取的名字还可以叫xxxx,尽量不要重复
  • 使用
// 加入到Vue原型中以后之需要通过 this 就可以拿到axios发送请求了
methods:{
    handle(){
      // 发送请求获取数据
      this.$axios.get('/ajax/moreClassicList?').then(res =>{
        console.log(res.data) 
      })
    }
  }

3.局部配置使用

  • 在某个组件中直接导入 axios
// 名字自己取$axios或者xxxx,不要重名
import $axios from 'axios'
  • 然后直接使用你定义的名字来发送请求
methods:{
    handle(){
      // 发送请求获取数据
      $axios.get('/ajax/moreClassicList?',{}).then(res =>{
        console.log(res.data) 
      })
    }
  }

三、cookies操作

1.安装Vue-cookies

cnpm install vue-cookies -S

2.配置：main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

 3. 在任意组件中使用

 this.$cookies.set()
 this.$cookies.set()

四、使用element-ui页面组件框架

1.安装element-ui

cnpm install element-ui -S

2.配置:main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.使用

五. 拓展：vue中使用jquery、bootstrap页面组件框架 (一般不用)

1.安装jquery、bootstrap

cnpm install jquery
cnpm install bootstrap@3

2.配置jquery：vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

3. 配置bootstrap：main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
posted @ 2023-02-28 16:44  莫~慌  阅读(23)  评论(0)  编辑  收藏  举报