Vue CLI 全面解析

什么是Vue CLI

Vue CLI是一个基于Vue.js进行快速开发的标准化工具，提供了快速生成Vue项目的能力，对于开发和构建大型Vue.js应用非常有帮助。它包含了一套插件和预设，可以让你在几分钟内即可创建Vue项目，配置工具链。

安装Vue CLI

要安装Vue CLI，我们首先需要安装Node.js。我们可以去Node.js官网下载安装包进行安装。安装完成后，打开命令行工具，输入以下命令：

npm install -g vue-cli

这将全局安装Vue CLI。

创建Vue项目

使用Vue CLI创建Vue项目非常简单，只需在终端中输入以下命令：

vue create my-project

其中my-project是你要创建的项目名称，你可以给它赋予任何名称。输入命令后，Vue CLI会自动安装和配置所有必要的依赖项和插件。在整个过程中，您需要按照提示操作即可。

Vue项目结构

使用Vue CLI创建的Vue项目具有以下基本结构：

my-project/
├── node_modules/            // 依赖包目录
├── public/                  // 静态资源目录
│   ├── favicon.ico          // 网站图标
│   └── index.html           // 网站主页
├── src/                     // 源代码目录
│   ├── assets/              // 静态资源目录
│   │   └── logo.png
│   ├── components/          // 组件目录
│   │   └── HelloWorld.vue
│   ├── App.vue              // 根组件
│   └── main.js              // 入口文件
├── .gitignore               // Git忽略文件列表
├── babel.config.js          // Babel配置文件
├── package.json             // 项目配置文件
└── README.md                // 项目介绍文档

示例一 - 添加一个组件

假设我们要添加一个Header组件，用于显示网站的头部。我们可以通过以下步骤完成：

1. 在src/components目录下创建Header.vue文件，代码如下：

<template>
  <div class="header">
    <h1>{{title}}</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      title: 'My Website'
    }
  }
}
</script>

<style>
.header {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

1. 在src/App.vue中引入Header组件，代码如下：

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

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

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

1. 执行npm run serve命令，查看效果。网站的头部就会显示出来。

示例二 - 配置代理

假设我们要将所有以/api开头的请求代理到http://localhost:3000服务器。我们可以通过以下步骤完成：

1. 在vue.config.js文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

1. 重启开发服务器，我们就可以通过http://localhost:8080/api/users来访问http://localhost:3000/users了。