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







 

打开后 

绿色文件不动