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

打开后

绿色文件不动

相关推荐
xiaoqi92223 分钟前
React Native鸿蒙跨平台如何进行狗狗领养中心,实现基于唯一标识的事件透传方式是移动端列表开发的通用规范
javascript·react native·react.js·ecmascript·harmonyos
jin1233221 小时前
React Native鸿蒙跨平台剧本杀组队消息与快捷入口组件,包含消息列表展示、快捷入口管理、快捷操作触发和消息详情预览四大核心功能
javascript·react native·react.js·ecmascript·harmonyos
烬头88212 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1362 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠3 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
2601_949833393 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
珑墨3 小时前
【Turbo】使用介绍
前端
军军君014 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9225 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
打小就很皮...5 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr