Vue 3 CLI 技术项目搭建说明

原创

lyushine

修改于 2024-12-06 17:01:38

15800

代码可运行

文章被收录于专栏：Web行业观察

运行总次数：0

代码可运行

一、安装 Node.js 和 Vue CLI

在开始之前，确保你的计算机上已经安装了 Node.js。你可以从 Node.js 官方网站下载并安装最新版本。安装完成后，可以通过以下命令检查 Node.js 和 npm 的版本：

node -v
npm -v

接下来，我们需要安装 Vue CLI。Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了从创建新项目到开发、测试、构建等一系列功能。通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue CLI 的版本：

vue --version

二、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目非常简单。只需运行以下命令：

vue create my-vue3-project

在创建过程中，Vue CLI 会提示你选择一个预设。你可以选择默认的预设（babel 和 eslint），也可以手动选择特性。为了使用 Vue 3，我们需要手动选择特性，并确保选择了 Vue 3 版本。

Vue CLI v4.5.13
? Please pick a preset:
  default (babel, eslint)
> Manually select features

在手动选择特性时，确保选择了 Vue 3：

? Check the features needed for your project:
 ◉ Babel
 ◉ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◉ E2E Testing
❯◉ Vue 3.x (Preview)

完成选择后，Vue CLI 会开始创建项目，并自动安装所需的依赖。

三、项目结构

创建完成后，进入项目目录并启动开发服务器：

cd my-vue3-project
npm run serve

项目的基本结构如下：

my-vue3-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

四、编写第一个 Vue 组件

在 src/components 目录下创建一个新的组件 HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

然后在 src/App.vue 中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

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

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

<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>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue-cli