前端: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

打开后

绿色文件不动

相关推荐
诗句藏于尽头6 分钟前
音乐播放器-单html文件
前端·html
歪歪1007 分钟前
ts-jest与其他TypeScript测试工具的对比
前端·javascript·测试工具·typescript·前端框架
CodeSheep12 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明198914 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆31 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician36 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥39 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN66681 小时前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序