前端:VUE-(0)-环境搭建和helloworld

1.vite构建

启动

2.环境搭建

快速上手 | Vue.js

2.1.需要有node.js环境

在工程创建的目录下打开cmd界面

路径:不出现中文

2.2 编辑器 vscode插件

public 页签图标

npm i 安装所有的依赖

3.文件解析

3.1.env.d.ts:

用于配置支持识别的 文件类型 官方写好的。

CTROL+点击 可以看到支持的文件类型。

3.2.index.html

入口文件:index.html

3.3.package.json

如何启动一个前端项目

1.查找命令名

2.回到console界面

如果运行正常,显示如下

3.4 vite.config.ts

整个工程的配置文件

4.SRC

必有的

App.vue 和 main.ts

入口

4.1 index

引入main.ts

main.ts

在这个文件里把工程中所有的app都定义出来的了。

import A from './A.VUE'

import B from './B.VUE'

import C from './C.VUE'

把创建的app放入工程中

createApp(App).mount('#app') //挂载在容器中

createApp(A).mount('#app')

createApp(B).mount('#app')

createApp(C).mount('#app')

index是必须要有2个元素的。

4

4.2App.vue

文件结构

VUE3 用的是ts

示例:

4.3main.ts

打开后

绿色文件不动

相关推荐
兆子龙3 分钟前
【React】19 深度解析:掌握新一代 React 特性
前端·架构
Moment22 分钟前
MinIO已死,MinIO万岁
前端·后端·github
无双_Joney26 分钟前
心路散文 - 转职遇到AI浪潮,AIGC时刻人的价值是什么?
前端·后端·架构
有意义1 小时前
深度拆解分割等和子集:一维DP数组与倒序遍历的本质
前端·算法·面试
卤蛋fg61 小时前
vxe-table 如何实现分组列头折叠列功能
vue.js
小怪点点1 小时前
vue3使用
前端·vue.js
进击的尘埃1 小时前
Vitest 自定义 Reporter 与覆盖率卡口:在 Monorepo 里搞增量覆盖率检测
javascript
进击的尘埃1 小时前
E2E 测试里的网络层,到底该怎么 Mock?
javascript
Bigger2 小时前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
DevUI团队2 小时前
🚀 【Angular】MateChat V20.2.2版本发布,新增8+组件,欢迎体验~
前端·javascript·人工智能