安装Vue CLI工具我们得先安装一个叫接下来可以根据需求继续编写更多组件和配置更多路由

作者：机器人技术佬 | 发布时间：2025-07-09 |

一、安装Vue CLI工具

为了开始创建Vue项目，我们得先安装一个叫Vue CLI的工具。这个工具能帮我们快速搭建Vue项目。下面是安装的步骤：

打开你的命令行工具，比如命令提示符或者终端。
然后输入这个命令来安装Vue CLI：npm install -g @vue/cli 或者 yarn global add @vue/cli。

安装好了之后，你可以用这个命令检查一下是否安装成功：vue --version。如果能看到版本号，就说明安装成功了。

二、创建Vue项目

安装完Vue CLI之后，就可以用它来创建一个新项目了。步骤如下：

在命令行中，进入到你想创建项目的文件夹。
然后输入这个命令来创建新项目：vue create 项目名称。这里的“项目名称”是你给项目取的名字。

之后，CLI会给你一些选项，你可以选择默认配置，也可以自定义配置。选择好之后，CLI就会自动创建项目目录和必要的文件了。

三、编写组件

在Vue项目中，组件是构建界面的基石。每个组件都可以有自己的HTML、CSS和JavaScript。创建组件的步骤是这样的：

在项目目录下，创建一个新的组件文件，比如叫做MyComponent.vue。
在文件里，写上以下代码：

<template> <div> <h1>这是我的组件！</h1> <input v-model="message"> <h2>{{ message }}</h2> </div> </template> <script> export default { data() { return { message: '你好，Vue！' }; } }; </script> <style scoped> /* 在这里写CSS样式 */ </style>

这个组件接受一个属性，并在模板中显示了它的值。

四、使用路由

如果你想在项目中使用路由，需要安装Vue Router插件。下面是使用路由的步骤：

进入项目目录。
然后输入这个命令来安装Vue Router：npm install vue-router 或者 yarn add vue-router。

在项目目录下创建一个新的路由配置文件，比如router.js，然后写上以下代码：

import Vue from 'vue'; import Router from 'vue-router'; import MyComponent from '@/components/MyComponent.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: MyComponent } ] });

在文件中引入路由配置，并将其添加到Vue实例中。

五、运行项目

完成以上步骤后，我们可以运行项目，看看效果。以下是运行项目的步骤：

进入项目目录。
然后输入这个命令来启动开发服务器：npm run serve 或者 yarn serve。

打开浏览器，访问，就能看到你创建的Vue界面了。