【星海随笔】vue+vite

开头问一个问题，我发现有的人粉丝是点赞数的好几倍，可能和必须关注他才能阅读他的文章有关。

所以问一下怎么设置为关注才能查看该文章。

bash 复制代码

screen -ls #查看 id 列表
screen -S <session_name> # 创建一个会话
screen -R <session_id> # 根据会话 ID 访问会话
Ctrl + a + d # 将进程后台执行
exit # 退出

vite

vite不需要专门的安装，有的npm和yarn 一般就会有vite了，这个是 vue3 携带的功能, 增加了很多 XML 类型功能。可前端区域更新，极大的减少了性能消耗。

bash 复制代码

yarn create vite

bash 复制代码

cd vite-project              # 切换到项目目录
yarn                         # 安装项目的全部依赖
yarn dev                     # 启动服务

yarn会读取当前项目的package.json文件中的命令配置，找到真正的命令并执行。

Vue 3项目的package.json文件中的命令配置如下。

bash 复制代码

{
  "name": "vite-project-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

dev是vite的别名，build是vite build的别名，preview是vite preview的别名

实际执行的命令是yarn vite。

使用yarn create命令创建项目

bash 复制代码

yarn create vite<项目名称>--template<模板名称>
yarn create vite hello-vite --template vue

nginx配置

bash 复制代码

server {
        listen 80;
        server_name vue.example.com;

    location / {
        proxy_pass http://localhost:5173/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }
}

下面简要介绍Vue 3项目的目录结构中各个目录和文件的作用，具体如下。

• vscode：存放VS Code编辑器的相关配置。

• node_modules：存放项目的各种依赖和安装的插件。

• public：存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。

• src：源代码目录，保存开发人员编写的项目源代码。

• src\assets：存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

• src\components：存放单文件组件，即.vue文件。

• src\components\HelloWorld.vue：一个名称为HelloWorld的单文件组件。

• src\App.vue：项目的根组件。

• src\main.js：项目的入口文件，用于创建Vue应用实例。

• src\style.css：项目的全局样式表文件。

• gitignore：向Git仓库上传代码时需要忽略的文件列表。

• index. html：默认的主渲染页面文件，同时也是页面的入口文件。

• package.json:包配置文件。

• README.md：项目使用说明文件。

• vite.config.js：存放Vite的相关配置。

• yarn.lock：存储每一个依赖项的安装版本，在使用yarn安装、升级、卸载依赖时，会自动更新yarn.lock文件。

此外，当执行了yarn build命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。

Vue 3项目的运行过程

使用Vite构建Vue 3项目后，当执行yarn dev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

src\App.vue文件

Vue 3项目是由各种组件组成的，src\App.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。

index.html文件

index.html文件是页面的入口文件，该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。

src\main.js文件

src\main.js文件是项目的入口文件，该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础，每个Vue项目都是从创建Vue应用实例开始的。