Vue CLI 指南

欢迎来到 Vue CLI 的世界！Vue CLI 是一个官方提供的前端项目脚手架，用于快速搭建 Vue.js 项目。以下是 Vue CLI 的基本使用方法和一些常用功能。

安装 Vue CLI

首先，您需要在您的计算机上安装 Node.js 和 npm。然后，可以通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

创建项目

安装 Vue CLI 后，可以通过以下命令创建一个新的 Vue.js 项目：

vue create my-project

这将会启动一个交互式命令行界面，引导您选择项目配置。

项目结构

Vue CLI 创建的项目通常具有以下结构：

my-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── ...
├── .browserslistrc
├── .gitignore
├── package.json
└── package-lock.json

起步

在 src 目录下，您可以看到 App.vue 文件，这是项目的入口组件。修改 App.vue 中的内容，您可以看到页面的变化。

<template>
  <div id="app">
    <img alt="Vue logo" src="https://cloud-image.ullrai.com/q/vue_logo/">
    <HelloWorld msg="Welcome to Your Vue.js 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>

资源文件

在 public 目录下，您可以放置静态资源，如图片、CSS 和字体文件。

热重载

Vue CLI 支持热重载功能，这意味着在开发过程中，您可以实时看到代码更改的效果，而无需重新启动服务器。

部署

Vue CLI 提供了 vue-cli-service build 命令，用于构建生产环境的项目。构建完成后，您可以将生成的 dist 目录部署到服务器上。

扩展阅读

如果您想了解更多关于 Vue CLI 的信息，可以访问 Vue CLI 官方文档。

[Vue CLI 官方文档](/vue-cli_guide)