Vue CLI 快速入门：从零开始搭建你的第一个 Vue.js 项目

Vue CLI（Command Line Interface）是 Vue.js 官方提供的强大工具，专为简化 Vue.js 项目的创建、启动、构建、测试流程而设计。通过使用 Vue CLI，开发者能快速初始化项目、选择项目模板并实现自动化构建和部署，大幅提高开发效率。

确保计算机已安装 Node.js，Vue CLI 依赖于 Node.js 的 npm 进行安装和项目管理。打开命令行或终端，执行以下命令：

npm install -g @vue/cli

安装完成后，使用 vue -v 命令验证 Vue CLI 是否已成功安装，并确认版本信息。

使用 Vue CLI 创建项目时，需指定项目名称、存储位置及所需的项目模板。例如，要创建名为 my-app 的项目，使用默认模板：

vue create my-app

在交互式界面中，接受默认选项或自定义项目名称、描述、作者信息、模板、组件、路由和类型设置。

Vue CLI 创建的标准项目结构包括：

• src：源代码目录，包含components、views、store、api、styles、utils等子目录。
• main.js：项目入口文件，用于配置 Vue 应用、引入全局样式和注册自定义指令。
• .gitignore：配置 Git 忽略文件和目录的文件。
• package.json：项目信息和依赖配置文件。

启动 Vue.js 项目后，通过命令在本地运行：

cd my-app
npm run serve

运行成功后，打开浏览器访问 http://localhost:8080 查看项目界面。在浏览器中直接修改代码，实时查看效果，适用于快速开发和迭代。

创建基本组件

Vue.js 采用组件化方式构建应用，通过创建组件实现复用和组合，简化复杂界面的构建。创建一个名为 Hello.vue 的新组件：

cd my-app
vue generate component HelloWorld

生成的 HelloWorld.vue 文件包含自定义 Vue 组件模板，可在此文件中添加逻辑和 CSS 样式：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
};
</script>

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

使用路由

Vue Router 实现 Vue.js 单页面应用（SPA）的路由切换。确保已安装 Vue Router：

npm install vue-router

在 src/router/index.js 文件中定义路由：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: HelloWorld },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

在 main.js 中引入并使用 Vue Router：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在 index.html 中添加路由链接：

<!-- index.html -->
<a href="/">Home</a>
</body>
</html>

完成上述步骤后，不仅可创建和运行完整的 Vue.js 项目，还能通过组件和路由实现功能丰富的界面。Vue CLI 的强大在于提供丰富的配置选项，支持多种需求的项目，为初学者提供便捷的开发起点。随着经验积累，探索 Vue.js 高级特性和最佳实践，构建复杂、高效的应用。