前端学习笔记

m0_58127402

已于 2024-03-29 09:59:41 修改

阅读量257

点赞数

文章标签：前端学习笔记

于 2023-11-17 16:25:06 首次发布

本文链接：https://blog.csdn.net/m0_58127402/article/details/134457294

版权

一、环境检查

查看node和vue是否已安装（cnpm为淘宝镜像，未安装）

vue-cli（vue脚手架）版本过旧，删除旧版本，安装新版本

二、新建vue项目

1.以管理员身份打开命令行界面

win+R输入cmd，ctrl+shift+enter打开

2.创建项目（test为项目名）

D:\project\vue>vue create test

3.按提示选择使用vue2还是vue3

4.创建成功

5.使用vscode打开文件夹，在终端中输入：npm run serve运行

三、添加依赖包

1.添加element-ui

npm i element-ui -S

element-ui组件官网：组件 | Element

2.原有依赖包不全

删除项目中原有的node-modles文件夹，在项目根目录下执行：

npm install

四、编写页面

1.vsCode打开项目文件

2.配置路由（用于跳转页面）

①终端中执行命令：npm i vue-router，安装路由

②在src文件夹内创建router文件夹，在router文件夹下创建index.js文件，在index.js文件中写入如下代码，实现创建一个路由器：

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/report',
    name: 'report',
    component: () => import('../views/ReportView.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

代码如上，其中home和report处为可自行修改的路由路径和名称。

上述示例代码实现结果：http:\\localhost:8080页面显示home页面，http:\\localhost:8080\report为report页面。

3.修改App.vue（不能直接删除该文件，否则页面出错）

删除结果如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.修改main.js

初始如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

添加了router（路由）、global.css（全局的样式表文件）、axios（用于前后端交互）、elementUI（封装组件）及引入后涉及到的配置。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/global.css'
import axios from 'axios'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI, { size: "small" });

Vue.prototype.$axios = axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.创建页面文件夹

在src文件夹内新建view文件夹，在此处存放页面。

6.components组件文件夹

存放页面中引用的组件。

7.修改vue.config.js（添加端口号部分，非必要）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true

  //这只是在开发环境中运行项目时的端口号，而不是在生产环境中运行时的端口号
  //若设定端口被占用则会用其他端口启动
  //不配置则默认8080，被占用则往上加（8081、8082...）
  devServe:{    
    port:8080, 
  }

})

8.修改结果

五、打包部署

1.打包Vue项目文件

默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接在vue项目根目录下执行 npm run build 即可（在vscode的终端执行/cmd进入文件路径执行命令）。

执行后在项目根目录下生成dist文件夹。

注：如果修改了Vue项目的文件，并希望重新生成dist文件夹，通常只需要删除原本的dist文件夹，然后重新运行npm run build命令即可。

2.配置nginx

使用npm run serve命令在本地终端运行页面时，只能在本机通过localhost或127.0.0.1来查看页面，其他机器无法通过网络访问到页面。如果希望其他机器也能够通过网络访问到页面，需要在服务器上安装Nginx等Web服务器，并将前端页面部署在服务器上。通过配置Nginx，可以让其他机器通过服务器的IP地址或域名来访问页面，从而实现跨机器的访问。

①服务器上安装nginx；

②修改nginx配置文件

nginx.conf例：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;


    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

		##访问应用服务器端口
        location ^~ /prod-api/ {
			proxy_pass http://APP_IP:9300/;
			proxy_redirect off;
			proxy_set_header Host $host:$server_port;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_connect_timeout 300s;
			proxy_send_timeout 300s;
			proxy_read_timeout 300s;
			client_max_body_size 200m;
		}
		
    }

}

其中，如下位置配置Nginx的web目录：

location / {
    # root处为Nginx的web目录，根据此配置，dist内文件应放在nginx\html路径下
    # 注：nginx.conf在nginx\conf路径下
    root   html;
    index  index.html index.htm;
}

访问应用服务器端口处，为配置访问后端应用的地址端口等信息：

location ^~ /toGateway/ {
	proxy_set_header Host $host:$server_port;
	proxy_pass http://9.8.47.10/toGateway/;
	proxy_redirect off;
	proxy_set_header Cookie $http_cookie;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Scheme $scheme;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	add_header backendIP $upstream_addr;
	add_header backendCode $upstream_status;
	proxy_connect_timeout 300s;
	proxy_send_timeout 300s;
	proxy_read_timeout 300s;
	client_max_body_size 200m;
}

注：使用Nginx代理转发前端消息给后端和直接在Vue项目文件里使用Axios给后端发送消息都是常见的前端与后端通信方式。

③将构建好的前端程序包（dist文件夹）部署到服务器：将前端程序包放置在Nginx的web目录下。

3.启动nginx

windows版本直接双击nginx安装文件内nginx.exe启动，在浏览器中输入：http://localhost:80 或 http://机器ip地址:80 后即可访问页面（不需要再通过在vscode里执行npm run serve打开页面）

注：

（1）步骤2中的nginx.conf配置了端口号为80，此处可自行设定空闲端口；

（2）在确保两台电脑通讯连接正常的情况下，电脑B通过网址 http://电脑A的ip地址:80 即可访问电脑A上部署的静态页面。

（3）停止nginx：nginx -s quit

（4）修改nginx配置文件后需重启nginx：nginx -s reload

六、其他

1.添加页面背景

①使用全局样式表：在Vue项目中，可以在全局样式表（如App.vue或index.html）中设置页面的背景样式。例如，在App.vue文件中添加以下样式代码：

<style>
body {
  background-image: url("/img/background.jpg");
  background-size: cover;
  background-position: center;
}
</style>

注：

（1）此时所有页面的背景均为设定的图片，且图片平铺整个页面。

（2）已知图片保存路径为test/public/img/1.PNG，App.vue路径为test/src/App.vue，此时图片路径写法如下（相对路径）：background-image: url("../public/img/1.PNG");

②在特定组件中设置背景：如果只想在特定组件中添加背景，可以在该组件的样式中设置背景样式。例如，在组件的style标签中添加以下样式代码：

<template>
  <div class="container">
    <!-- 页面内容 -->
  </div>
</template>

<style>
.container {
  background-image: url("/img/background.jpg");
  background-size: cover;
  background-position: center;
}
</style>

注：

（1）已知图片保存路径为test/public/img/1.PNG，组件位置为test/src/views/JpmeView.vue，此时为background-image: url("../../public/img/background.jpg");

（2）页面可能出现没有向下滚动条的情况，且如果手动刷新就可以正常下拉页面了。这是由于Vue默认会对路由页面进行缓存，以提高页面切换的性能。这意味着当从页面A跳转到页面B后，页面B可能会保留之前的滚动位置和状态，而不会重新渲染页面。我的解决办法：在页面A跳转页面B的按钮绑定重新加载页面的方法：

<template>
<div>
  <h1>页面A</h1>
  <button @click="reloadPage" />
  <!-- 页面A其他内容 -->
</div>
</template>

<script>
export default {
  methods: {
    reloadPage() {
      this.$router.push('/pageB').then(() => {
        location.reload();
      })
    }
  }
}

③使用动态绑定：如果想根据数据动态设置背景，可以使用Vue的动态绑定功能。例如，在data中定义一个变量来存储背景图片路径，然后在模板中动态绑定该变量：

<template>
  <div :style="{ backgroundImage: 'url(' + backgroundUrl + ')', backgroundSize: 'cover', backgroundPosition: 'center' }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundUrl: '/img/background.jpg'
    };
  }
}
</script>

注：

（1）此时设置的图片的显示长和宽仅为组件范围，可能会因为图片与页面显示区域面积不同而导致图片无法完全展示出来。

（2）在Vue项目中，public 文件夹是一个特殊的文件夹，其中的文件会被直接复制到构建输出的根目录下。因此，backgroundUrl中直接引用 public 文件夹中的文件，而不需要使用相对路径。这里尝试的时候使用相对路径网页报错，无法正常显示图片，返回的字符串应写为：backgroundUrl: 'img/1.PNG'，即直接写public文件夹内的图片位置，此时可以在页面中看到图片了。（这个问题只在添加页面背景的方法③中遇到）