随便开个文件夹，然后在命令行里输入命令

```sh
$ npm create vite@latest

> npx
> create-vite

√ Project name: ... vite-project   # 项目名称, 随便起个名字
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in E:\code\vuetest\vite-project...

Done. Now run:

cd vite-project
npm install
npm run dev
```

selector {
  property1: value1,
  property2: value2;
}

静态资源的渲染生成
Template(DSL) -> Virtual DOM -> DOM API -> Real DOM
事件驱动变化（热响应）
Event -> Virtual DOM Tree -> Real DOM Tree -> Rendering

<script>
// 一些配置的内容，大概可以理解为C++里面`#include #define`和变量的命名
</script>

<template>
  <!--这里是主体部分，写在这里可以改变网页的显示-->
</template>

<style scoped>
// 用来显示样式
.read-the-docs {
  color: #888;
}
</style>

<script>
export default {
  // data是用来存储组件的状态的
  data() {
    // 这里返回一个对象，包含了组件的状态，其实就是命名一个变量
    return {
      // 这里用键值对的形式进行存储，注意键不能跟数据库一样加引号，不然会变成静态字符串
      name: "Zari",
      message: "Hello"
    }
  },
  // methods是用来定义组件的方法的
  methods: {
    // 这里定义了组件的方法，可以用this调用，从而改变组件的状态
    sayHello() {
      this.name = "Zari Tsu";
    }
  }
}
</script>

<template>
  <div class="read-the-docs">
    <p>这里是div测试</p>
  </div>
  <span>
    <p>这里是span tag测试</p>
  </span>
  <!--这个@click用来绑定一个方法，当按钮被点击时，调用sayHello方法-->
  <button @click="sayHello">
    {{ message }}! My name is {{ name }}!
  </button>
</template>

// 先导入包，然后使用 axios.xxx 调用方法
import axios from 'axios';

// 创建 axios 实例
const service = axios.create({
    baseURL: 'http://127.0.0.1:8080', // api base_url
    timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        // 在发送请求之前做一些处理
        // 这个就是咱们在后端通过Authorization拿到的token
        config.headers['Authorization'] = 'Bearer ' + token;
        // 这个就是我们在比如使用PostMan测试接口的时候，需要设置的请求头，用json还是plain-text
        config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        return config;
    },
    error => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 处理响应数据，相当于一个全局的拦截器，如果返回200异常码，则进行拦截处理
        const res = response.data;
        if (res.code !== 200) {
            return Promise.reject(new Error(res.message || 'Error'));
        } else {
            return res;
        }
    },
    error => {
        return Promise.reject(error);
    }
);

// 给外界暴露一个 request 方法
export const request = (url, method, data = '') => {
    return service({
        url: url,
        method: method,
        // 因为get方法要把查询请求参数放在url里面，如果是其他的话就需要放在一个对象里(具体什么对象由content-type决定)
        // 也就是说，params是路径传参，而data是请求体传参
        [method === 'get' ? 'params' : 'data']: data,
    })
}

// 封装常用接口，举个例子而已
export const getRequest = (url, params = {}) => request(url, 'get', params);

export const postRequest = (url, data = {}) => request(url, 'post', data);

<script>
import { request } from '../utils/request/request.js';

export default {
  data() {
    return {
      name: "Zari",
      message: "Hello",
    }
  },
  methods: {
    getHelloMessage() {
        // 用var类型的变量来装载request方法的返回值，当然因为我们这里的response其实不会变化所以换用const
        // 注意这里的url可以忽略IP和端口的前缀
        const response = request('/api/hello', 'get', 'data');
        // 我们可以用这个在页面审查时查看返回的数据
        console.log(response);
    },
    // 除此之外，我们还可以异步地获取数据，比如用async/await
    async getHelloMessageAsync() {
        try {
            const response = await request('/api/hello', 'get', 'data');
            console.log(response);
        } catch (error) {
            console.log(error);
        }
    }
}
</script>

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 允许跨域访问所有路径的请求
              .allowedOrigins("*")  // 允许跨域访问所有域名的请求
              .allowedMethods("GET", "POST", "PUT", "DELETE")  // 允许跨域访问这四个常用的请求方法
              .allowedHeaders("*")  // 允许跨域访问所有请求头
              .allowCredentials(true)  // 允许携带cookie
              .maxAge(3600);    // 预检请求的有效期
    }

@CrossOrigin
@RestController
@RequestMapping("/api")
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello";
    }
}

module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      // 假设url前缀是/api
      '/api': {
        // 假设后端是8081端口
        target: 'http://localhost:8081',
        // 是否允许跨域
        changeOrigin: true,
        // 路径重写，将/api替换成''
        pathRewrite: {
          '^/api': ''
        }
      }
  }
}

export default {
  data() {
    return {
      name: "Zari",
      message: "Hello",
    }
  },
  // created代表数据获取完毕，但是dom还没生成无法操作
  created() {
    // 这里可以请求数据
    this.getHelloMessage();
  },
  // mounted代表dom生成完毕，可以操作dom，类似对span标签的操作
  mounted() {
    // 这里可以渲染数据
    console.log('mounted');
  },
  methods: {
    getHelloMessage() {
        const response = request('/api/hello', 'get', 'data');
        console.log(response);
    }
  }
}