分享：前端怎么给页面插入背景_前端插入背景图片-优快云博客

本文介绍了如何在前端项目中设置页面背景。通过整合nuxt和vue环境，修改api.js和nuxt.config.js，将背景图片放入static/image文件夹，并在对应的css文件中编写样式。在pages的vue文件中应用样式，实现背景显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端怎么给页面插入背景

1.整合nuxt和vue环境
注意事项：如果出现带括号的选项，记得按空格，括号内会出现星号(*)
例如：

>(*) Axios
 ( ) Progressive Web App (PWA) Support
 ( ) DotEnv

总共有以下14个搭建环境步骤

1.npx create-nuxt-app aa(项目名) 
2.Generating Nuxt.js project in aa(项目名)————————确认项目名 
3.Project description (My splendid Nuxt.js project)————————确认描述 
4.Author name () ll————————确认项目的作者 
5.Choose programming language (Use arrow keys)————————选择JavaScript 
6.Choose the package manager————————选择Npm 
7.Choose UI framework (Use arrow keys)————————Element 
8.Choose custom server framework (Use arrow keys)————————None (Recommended) 
9.Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)————————选择Axios
10.Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)————————直接回车 
11.Choose test framework (Use arrow keys)————————选择NONE 
12.Choose rendering mode (Use arrow keys)————————选择> Universal (SSR)
 13. Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)————————直接回车 
14.开始安装

2.修改api.js中的代码

const request = {
//示例方法代码
  test : ()=> {
    return axios.get('/test')
  }
  var axios = null
export default ({ $axios, redirect }, inject) => {
  //赋值
  axios = $axios  //4) 将自定义函数交于nuxt
  // 使用方式1：在vue中，this.$request.xxx()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
  inject('request', request)
}

3.修改nuxt.config.js

//ctrl+F在文件中搜索plugins即可
plugins：{src:'~plugins/api.js',mode: 'client'}

4.static文件
1.如果没有image(存放图片)或style(存放css文件)文件，请进行创建
2.选用一张背景图复制到image文件中
3.在style中创建css样式文件
4.背景代码示例：

.cha{background: url(../image/ddya.gif);height: 720px;}

5.找到pages文件
1.在index.vue文件中或者自己创建一个vue文件
2.在

区域中加入此段代码：

head: {
    title: '首页',
    link: [
      {rel:'stylesheet',href: '/style/base.css'}],//修改css文件
    script: [
      { type: 'text/javascript', src: '/js/jquery-1.8.3.min.js' }
    ]
  }