当前位置：首页 > news >正文

【前端】⭐️通过vite构建项目

news 来源：原创 2025/6/28 8:40:15

请添加图片描述

目前TypeScript语言使用的繁多，而这次模板是 Vite 项目（monorepo）

pnpm设置镜像源

pnpm 设置镜像源pnpm config set registry https://registry.npmmirror.com，查询配置是否成功pnpm config list

下载pnpm及node

先从项目的package.json文件中查pnpm和node所需要的版本，进行安装，如果在pnpm安装后，重新安装了node版本，则需要重新安装pnpm

首先找到pnpm(包管理器)的版本，可以找，执行npm install -g pnpm@10.12.2进行安装
注意：因为pnpm依赖于Node.js环境，而pnpm10.12.2版本需要node18.12+版本，所以在安装pnpm时，先切换到node到node18.12+版本）

如果npm install 安装失败报错npm error Cannot read properties of null (reading 'matches'),这时要么清缓存npm cache clean --force，要么删依赖包重下（不推荐使用npm）

这里报错，node版本(16)太低,需要升级到18+，所以这里执行nvm list 查看node的安装过的版本，并切换node版本nvm use 20.9.0
执行pnpm --version 和 node --verison 查看版本

删除包

将项目的node_modules依赖包删除,这里执行pnpm install 会通过package.json 文件，进行重新下载依赖包

启动服务

貌似没什么用
pnpm --filter vite dev
pnpm dev

创建vue项目及运行

创建项目 (在任意文件下cmd执行)

使用 NPM:npm create vite@latest使用 Yarn:yarn create vite使用 PNPM:
pnpm create vite

打包运行项目( 输入项目名，包名，及要使用的框架)

cd  /刚刚构建的项目（一级目录）
pnpm  install
pnpm run dev

在这里插入图片描述

浏览器预览 http://127.0.0.1:5173/

项目结构介绍

在这里插入图片描述

1. index.html

这个就是vue项目的总页面，会去展示核心标签 <div id="app"></div>

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

2. App.vue

App.vue文件是一个父组件，而其他组件都是他的儿子组件，该vue文件算是一个特殊的html文件，里面包含html，js,css

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script><template><div><a href="https://vite.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

请添加图片描述

关注点应该是这个 import HelloWorld from './components/HelloWorld.vue' ,这里是父组件引入子组件，而 <HelloWorld msg="Vite + Vue" /> 表示父组件向子组件HelloWWorld.vue传递了一个字符串参数msg="Vite + Vue"

3.HelloWorld.vue

这是个子组件，由父组件App.vue调用

<script setup lang="ts">
import { ref } from 'vue'defineProps<{ msg: string }>()const count = ref(0)
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Learn more about IDE Support for Vue in the<ahref="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"target="_blank">Vue Docs Scaling up Guide</a>.</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>

这里我们看出
import { ref } from 'vue' 表示从Vue库中导入 ref 函数，ref是一个响应式函数（类似java导入某类的工具）

defineProps<{ msg: string }>() 表示接收父组件传递过来的msg字符串
const count = ref(0) 创建一个响应式的数据引用,count是一个变量名，并将0传给ref函数作为初始值，意味着当count值发生改变，vue组件也会自动更新
{{ msg }} 是vue的插值语法，即将父组件传递过来的msg 信息显示出来

4. main.ts

main.ts是应用程序的入口文件，也是让父组件App.vue与index.html文件的 <div id="app"></div> 产生联系

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

import { createApp } from 'vue' : 从vue导入createApp函数，用于创建Vue项目

import App from './App.vue': 导入父组件App.vue

createApp(App).mount('#app'): 创建一个Vue项目实例，并将父组件App.vue挂载到 id 为app的标签下

使用ElementPlus

1. 安装对应组件

pnpm install element-plus

我们在使用 Vue 和其对应的组件之类时，都可能会需要这两个插件的帮助，帮助我们实现按需自动导入，避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。

pnpm add -D unplugin-auto-import
pnpm add -D unplugin-vue-components

在 Vite 的配置文件vite.config.ts中添加如下代码

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})