快速开始
早前可以通过vue-cli
npm create vue@latest
需要先安装 npm（NodeJS 的包管理器）。
会开启一个交互式命令行界面：
任何组件都可以在后期手动添加，这里只选择一个 TS（TypeScript）支持。
创建好项目框架后，需要进入项目根目录并安装依赖：
npm install
依赖会安装在node_modules目录下。
依赖安装好后可以启动项目：
npm run dev
访问命令行显示的链接即可打开项目主页：
加载顺序
浏览器先加载的是index.html这个文件，这个文件中定义了一个 id 为app的 div，并且加载了main.ts：
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
main.ts中引入了根组件App.vue，并且通过createApp方法创建 vue 应用，然后将其挂载到index.html的 div：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
示例项目页面加载的内容都是由 App.vue 定义的：
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
一个.vue文件定义一个组件，由三部分组成：
-
模版（template），决定页面显示的内容，传统的 Html 标签都在这里添加
-
代码（script），决定页面的交互逻辑，js 或 typescript 代码都添加在这里
-
样式（style），决定页面组件的显示样式，css 代码添加在这里
简单示例
可以删除框架中的src目录，再手动创建，并添加关键文件以实现一个简单示例。
src\main.ts：
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
src\App.vue：
<template>
<!-- HTML -->
</template>
<script>
// TS 或 js
</script>
<style>
/* css 样式 */
</style>
当然现在页面是空白的，添加一些内容：
<template>
<!-- HTML -->
<h1>Hello World</h1>
</template>
可以使用 AI 工具根据页面内容生成一些样式，以美化页面：
<style scoped>
/* css 样式 */
body {
margin: 0;
background-color: #f8f9fa;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 3.5rem;
font-weight: 300;
color: #343a40;
padding: 20px 40px;
border: 2px solid #dee2e6;
border-radius: 8px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
h1:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
</style>
style标签有一个属性scoped，添加了这个属性后，vue 文件中的样式仅对当前模版（template）有效。
最后，为了外部能正常引用这个组件，还需要暴露组件名称：
<script lang="ts">
// TS 或 js
export default {
name: 'App',
}
</script>
在这个示例中，不这样做也不会报错，原因是组件文件名是
App.vue，因此其默认组件名就是App，如果不是（比如Index.vue），就需要通过默认暴露（export default）的方式指定组件名称。
此外，默认情况下script标签中支持的是 javascript 语言，如果要使用 typescript，就需要使用lang="ts"属性。
再为根组件添加一个子组件src\Person.vue：
<template>
<div class="person">
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>
<button @click="showPhone">查看手机号</button>
</div>
</template>
<script lang="ts">
export default {
name: 'Person',
data() {
return {
name: '张三',
age: 18,
phone: 123213123,
}
},
methods: {
showPhone() {
alert(this.phone)
}
}
}
</script>
<style scoped>
.person {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.5rem;
font-weight: 300;
color: #343a40;
padding: 20px 40px;
border: 2px solid #dee2e6;
border-radius: 8px;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
</style>
要在根组件中使用子组件，需要在 TS 代码中导入和注册：
<script lang="ts">
// 导入组件
import Person from './Person.vue'
// TS 或 js
export default {
name: 'App',
components: { Person }, // 注册组件
}
</script>
然后在模版中需要使用的位置添加组件名定义的标签：
<template>
<!-- HTML -->
<h1>Hello World</h1>
<Person></Person>
</template>
The End.
文章评论