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

打开后

绿色文件不动

相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue