正文

Vue3框架入门：轻松上手，详细步骤教你成功引入

/0 浏览量
0815

准备工作

在开始学习Vue3之前，你需要确保你的开发环境已经准备好。以下是一些基本的准备工作：

  1. 安装Node.js和npm：Vue3需要Node.js和npm来运行和构建项目。你可以从Node.js官网下载并安装。
  2. 安装Vue CLI：Vue CLI是一个官方命令行工具，用于快速搭建Vue.js项目。你可以通过以下命令全局安装Vue CLI：
npm install -g @vue/cli

创建Vue3项目

一旦你的环境准备就绪，你可以使用Vue CLI创建一个新的Vue3项目。以下是一个简单的例子：

vue create my-vue3-project

这个命令会创建一个名为my-vue3-project的新项目。在创建过程中，Vue CLI会询问你一些配置问题，你可以根据需要选择。

项目结构

创建完项目后，你会看到以下目录结构：

my-vue3-project/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router/
├── .gitignore
├── package.json
├── package-lock.json
└── README.md
  • node_modules/：存放项目依赖的模块。
  • public/：存放静态文件，如图片、CSS等。
  • src/：存放源代码。
    • assets/：存放图片、字体等资源。
    • components/：存放Vue组件。
    • App.vue：根组件。
    • main.js：入口文件。
    • router/：存放路由配置。

编写第一个Vue3组件

现在，让我们创建一个简单的Vue3组件。在src/components/目录下创建一个名为HelloWorld.vue的文件，并添加以下内容：

<template>
  <div>
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

这个组件包含一个模板（<template>）、一个脚本（<script>）和一个样式（<style>）。模板定义了组件的结构，脚本定义了组件的行为，样式定义了组件的样式。

引入组件

在src/App.vue文件中，引入并使用HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

现在，当你运行项目时，你应该能看到一个红色的“Hello, Vue 3!”标题。

运行项目

在项目根目录下，运行以下命令启动开发服务器：

npm run serve

打开浏览器，访问http://localhost:8080/，你应该能看到之前创建的组件。

总结

恭喜你，你已经成功入门Vue3框架！通过以上步骤，你学会了如何创建一个Vue3项目，编写组件，并引入组件。接下来，你可以继续学习Vue3的其他高级特性，如路由、状态管理等。祝你学习愉快！

-- 展开阅读全文 --