技术栈

• 编程语言：Typescript
• 构建工具：Vite 5.X
• 前端框架：Vue3
• UI框架: Element-Plus
• HTTP工具：Axios
• Vue插件： Vueuse

项目创建

nvm install 20.10.0 #安装最新版本的node 
nvm use 20.10.0 #切换node版本 
npm -v #确定npm版本
nrm ls #确定npm镜像配置地址，国内镜像
yarn create vite vue-app --template vue-ts # 创建项目vite-app,vue-ts模板
cd vue-app #进入项目目录
yarn #安装依赖 
yarn dev #启动服务

本地服务

执行yarn dev后，控制台会输出本地服务的URL，浏览器可以访问Demo页面，如下：

那么，执行命令到本地服务启动完成这个过程是如何实现的？可参考这篇文章： 初识 vite 原理，vite 是如何启动项目的

Demo页面

Demo页面是包括链接、文字和一个计数器组件，实现的代码主要涉及4个文件：

• 入口HTML：index.html
• 入门JS：main.ts
• 父组件：App.vue
• 子组件：HelloWorld.vue

核心代码内容是： index.html创建了一个id为app的div元素； main.ts引入了App.vue组件，并执行creataApp方法把App组件挂载到id为app的元素上； App.vue组件引入了HelloWorld.vue组件，将其作为子组件渲染，并向子组件传递参数msg； HelloWorld.vue组件：获取App.vue传入的msg值，使用ref()使其为响应式数据，将响应式数据挂载到h1元素内。