【前端】⭐️通过vite构建项目-EW帮帮网

请添加图片描述

目前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
    <a
      href="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()],
    }),
  ],
})

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