使用Vite搭建一个Vue3项目

用vite构建Vue3项目

首先要安装NodeJS，我们要用到其中的npm命令，可参考这篇
https://blog.youkuaiyun.com/qq_42006801/article/details/124830995
然后参照以下步骤:

1. cmd 进入要创建项目的目录
   npm init vite@latest
2. 根据向导提示 完成项目创建 这里具体就是填项目名称，选择开发的框架
3. cd 命令进入项目目录
4. npm install //完成相关依赖下载
   npm run dev //运行项目
   
   我这里演示基于Vite创建Vue3的基于TypeScript语言开发的项目，它默认监听5173端口,项目结构如下

• index.html 为主页面
• package.json npm 配置文件 维护当前项目的有关依赖
• tsconfig.json typescript 配置文件
• vite.config.ts vite 配置文件
• public 静态资源
• src/components 可重用组件
• src/model 模型定义
• src/router 路由
• src/store 共享存储
• src/views 视图组件

3）配置服务器

1. 配置主机与端口
   在vite.config.ts文件中，进行对server的配置，按个人需求来，host属性的值是string | boolean， 如果将此设置为 ‘0.0.0.0’ 或者 true 将监听所有地址
   
2. 通过在前端配置代理来解决跨域问题
   

也可以在后端对Controller接口层的方法加上@CrossOrigin(origins = “http://localhost:4000”) 来解决，origins表示前端的uri，这样当响应到达浏览器时，就会告诉浏览器不要把我的响应给丢弃，从而前端能展示后端响应数据.

当对项目配置进行更改时，不需要去重新启动项目，只需要在编译器上保存自己修改的内容，会自动进行热部署

4）快速上手

1. <template>中放html代码，<style>中放css代码,<script>中放js或ts代码，但要在标签中声明所使用的语言
2. 在<template>中使用{{msg}}可以绑定js中msg的值。
3. 要将msg声明为响应式变量,这样才会在ts代码中修改msg的值后同步到html中，即让页面也跟着变化，但在ts中访问变量值不能再使用msg而是要使用msg.value