3.Vue进阶

vite脚手架

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

（1）一个开发服务器，它基于 原生ES模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

（2）一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

1.安装node.js

进入nodejs官网：https://nodejs.org/en/

下载LTS（长期支持稳定）版本，下载下来后，双击 一步一步安装即可；

测试安装是否OK； node --version

以及安装Node的时候，Npm包管理工具也是一并安装的，现在不需要自己安装，nodejs中已经集成了npm包管理工具；

npm -v 查看版本

2.注册国内镜像

npm config set registry https://registry.npm.taobao.org

https://blog.csdn.net/qq_43940789/article/details/131449710 这里有很多镜像，上面的不行就换一个

vite搭建HelloWorld

1.搭建vite项目

npm create vite@latest
输入项目名
选择vue框架
选择javascript语言
cd 切换到创建的项目下
执行 npm install 安装
npm run dev 运行项目
ctrl+c 停止项目

核心本质，是去github下载一个模版；通过脚手架可以设置名称，以及定制插件；

2.打开运行项目

3.优化配置

vite.config.js下优化配置

浏览器的默认端口 是80

4.添加组件

删除src/components目录下的组件，创建自己的HelloWorld组件

<template>
<h1>你好 vue</h1>
</template>
<script>
//模块化 默认暴露 默认暴露的时候要加default
export default {
  name: "HelloWorld"
}
</script>

<style scoped>
h1{
  color: red;
}
</style>

在vue组件，每个文件的后缀是.vue，每个vue的组件文件分三个部分；

• 第一个部分：