前端开发实战（第二讲）

vue3项目的目录结构

.vscode:存放VS Code编辑器的相关配置。

node_modules:存放项目的各种依赖和安装的插件。

public:存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。

src:源代码目录，保存开发人员编写的项目源代码。

src\assets:存放可编译的静态资源文件，例如图片、样式文件等，该目录下的文件需要使用相对路径访问。

src\components:存放单文件组件，即.vue文件。

src\components\Hello World.vue:一个名称为Hello World的单文件组件。

src\App.vue:项目的根组件。

src\main.js:项目的入口文件，用于创建Vue应用实例。

src\style\css:项目的全局样式表文件。

.gitignore:向Git仓库上产代码时需要忽略的文件列表。

index.html:默认的主渲染页面文件，同时也是页面的入口文件。

package.json:包配置文件

README.md:项目使用说明文件

vite.config.js:存放Vite的相关配置

yarn.lock:存放每一个依赖的安装版本

Vue3项目的运行过程

第一种方法

1，首先在Compinents下创建一个demo.vue模板

<template>
	<p>
		Hi lele
	</p>
	<p>
		{{ msg }}
	</p>
</template>

<script setup>
	const msg='hi again';
</script>

<style>
</style>

2，想要使用demo.vue就要在App.vue下提前声明

import Hi from './components/demo.vue'

Hi的名字可以任意取

随后在App.vue下可以使用Hi作为标签使用

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
import Hi from './components/demo.vue'
</script>

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
  <Hi></Hi>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第二种方法

<template>
	{{ msg }}
</template>

<script>
	export default {
	  data() {
	    return {
	      msg: "hehe"
	    }
	  }
	}
</script>

<style>
</style>

第三种方法

<template>
	{{ msg }}
</template>

<script>
	export default{
		setup() {
			const msg = "hehe"
			return {
				msg
			}
		}
</script>

<style>
</style>