sudo su

cd /etc/netplan

vi 00-installer-config.yaml

配置参考

network:
  ethernets:
    ens33:
      dhcp4: false
      addresses: [172.16.33.225/24]
      routes:
          - to: default
            via: 172.16.33.1
      nameservers:
        addresses: [114.114.114.114,8.8.8.8]
  version: 2

应用网络配置

netplan apply

创建项目目录

mkdir project_name

安装vite

npm init vite@latest project_name

framework选择Vue
variant选择JavaScript

进入项目目录

cd project_name

在当前目录创建环境配置文件

根据各自环境需求创建相应的环境配置文件
测试环境配置文件: .env.development
生产环境配置文件: .env.production

project_name/.env.development
project_name/.env.production

文件内容demo：

VITE_API_URL=http://127.0.0.1:9696      #api接口地址
VITE_SITE_PORT=9797                     #站点监听端口

配置vite.config.js，全局引入环境变量及配置@别名

project_name/vite.config.js：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    define:{
      'process.env': env                        //注入配置文件环境变量
    },
    plugins: [vue()],
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")        //注入静态目录别名@
      }
    },
    server: {
      host: '0.0.0.0',
      port: Number(env.VITE_SITE_PORT),         //使用环境配置文件监听的端口
      open: true,                               //运行时自动打开网页
    }
  })
}

安装sass支持

npm install -D sass-loader sass

安装vue-router

npm install -S vue-router@next

新建路由配置文件index.js

project_name/src/router/index.js：

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
    {
        path: "/",
        name: "home",
        //记得顺便新建home文件的index.vue组件
        component: () => import("@/views/home/index.vue"),
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

在src/main.js里面引用路由配置文件

project_name/src/main.js：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

const app = createApp(App);
app.use(router);
app.mount('#app');

在App.vue里面使用vue-router

<template>
  <router-view></router-view>
</template>

安装axios

npm install axios

在src下创建目录util及api.js文件

project_name/src/util/api.js：

请求接口及拦截处理需自行封装，以下是简单的demo：

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VITE_API_URL || '/', // 设置基本 URL
  timeout: 120*1000 // 请求超时时间120秒
})

const _get = async(url, data) => {
    instance.defaults.headers.common['Authorization'] = "xxxx";
    return new Promise((resolve, reject) => {
      instance.get(url, data)
      .then(response => {
          resolve(resp.data);
      })
      .catch(error => reject(error));
    });
}

export default {
    _get:_get,
    // ...
}

添加自适应相关插件

amfe-flexble 根据当前页面的尺寸去设置根元素的font-size

npm i -S amfe-flexible

postcss-pxtorem 将px转换成rem

npm install postcss-pxtorem --save

在 main.js 中引入 amfe-flexble

import 'amfe-flexible'

vite.config.js中的配置
import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig({
    plugins: [
        vue(),
    ],
    css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    // 自适应，px>rem转换
                    rootValue: 37.5,// 75表示750设计稿，37.5表示375设计稿
                    propList: ['*'],// 需要转换的属性，这里选择全部都进行转换
                    // selectorBlackList:['norem']，// 过滤掉norem-开头的class，不进行rem转换
                }),
            ],
        },
    }
});

面向对象（Object-Oriented，简称 OO）是一种编程思想和方法，它将程序中的数据和操作数据的方法封装在一起，形成"对象"，并通过对象之间的交互和消息传递来完成程序的功能。面向对象编程强调数据的封装、继承、多态和动态绑定等特性，使得程序具有更好的可扩展性、可维护性和可重用性。

在面向对象的程序设计（英语：Object-oriented programming，缩写：OOP）中，对象是一个由信息及对信息进行处理的描述所组成的整体，是对现实世界的抽象。

在现实世界里我们所面对的事情都是对象，如计算机、电视机、自行车等。

对象的主要三个特性：

对象的行为：对象可以执行的操作，比如：开灯，关灯就是行为。
对象的形态：对对象不同的行为是如何响应的，比如：颜色，尺寸，外型。
对象的表示：对象的表示就相当于身份证，具体区分在相同的行为与状态下有什么不同。
比如 Animal(动物) 是一个抽象类，我们可以具体到一只狗跟一只羊，而狗跟羊就是具体的对象，他们有颜色属性，可以写，可以跑等行为状态。

面向对象编程的三个主要特性：

封装（Encapsulation）：指将对象的属性和方法封装在一起，使得外部无法直接访问和修改对象的内部状态。通过使用访问控制修饰符（public、private、protected）来限制属性和方法的访问权限，从而实现封装。

继承（Inheritance）：指可以创建一个新的类，该类继承了父类的属性和方法，并且可以添加自己的属性和方法。通过继承，可以避免重复编写相似的代码，并且可以实现代码的重用。

多态（Polymorphism）：指可以使用一个父类类型的变量来引用不同子类类型的对象，从而实现对不同对象的统一操作。多态可以使得代码更加灵活，具有更好的可扩展性和可维护性。在 PHP 中，多态可以通过实现接口（interface）和使用抽象类（abstract class）来实现。

面向对象内容
类 − 定义了一件事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。

对象 − 是类的实例。

成员变量 − 定义在类内部的变量。该变量的值对外是不可见的，但是可以通过成员函数访问，在类被实例化为对象后，该变量即可成为对象的属性。

成员函数 − 定义在类的内部，可用于访问对象的数据。

继承 − 继承性是子类自动共享父类数据结构和方法的机制，这是类之间的一种关系。在定义和实现一个类的时候，可以在一个已经存在的类的基础之上来进行，把这个已经存在的类所定义的内容作为自己的内容，并加入若干新的内容。

父类 − 一个类被其他类继承，可将该类称为父类，或基类，或超类。

子类 − 一个类继承其他类称为子类，也可称为派生类。

多态 − 多态性是指相同的函数或方法可作用于多种类型的对象上并获得不同的结果。不同的对象，收到同一消息可以产生不同的结果，这种现象称为多态性。

重载 − 简单说，就是函数或者方法有同样的名称，但是参数列表不相同的情形，这样的同名不同参数的函数或者方法之间，互相称之为重载函数或者方法。

抽象性 − 抽象性是指将具有一致的数据结构（属性）和行为（操作）的对象抽象成类。一个类就是这样一种抽象，它反映了与应用有关的重要性质，而忽略其他一些无关内容。任何类的划分都是主观的，但必须与具体的应用有关。

封装 − 封装是指将现实世界中存在的某个客体的属性与行为绑定在一起，并放置在一个逻辑单元内。

构造函数 − 主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。

析构函数 − 析构函数(destructor) 与构造函数相反，当对象结束其生命周期时（例如对象所在的函数已调用完毕），系统自动执行析构函数。析构函数往往用来做"清理善后" 的工作（例如在建立对象时用new开辟了一片内存空间，应在退出前在析构函数中用delete释放）。