概述

Vue CLI 是 Vue.js 官方提供的命令行工具，旨在简化 Vue 项目的创建、配置与管理流程，助力开发者快速构建功能完备的前端应用，提供丰富的模板与工具支持。

Vue CLI简介

Vue CLI 是 Vue.js 官方命令行工具，它集成了项目创建、配置与管理功能，显著简化了前端应用的开发流程。通过提供丰富的模板与工具，Vue CLI 支持快速构建功能完备的前端应用，支持从项目启动到部署的整个开发周期。其优势在于高效、灵活地适应不同项目需求，是 Vue 开发者不可或缺的工具之一。

安装 Vue CLI

为了使用 Vue CLI，首先确保你的计算机已经安装了 Node.js，这是一切的基础。通过终端或命令提示符执行以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

若不需全局安装，建议使用 --global 参数：

npm install -g --global @vue/cli

安装完成后，通过 vue -V 命令检查 Vue CLI 是否成功安装。

初始化 Vue 项目

Vue CLI 提供了 vue create 命令用于创建项目，通过选择不同的模板进行初始化配置。

创建新项目

假设你希望创建一个新项目并选择默认模板：

1. 进入你期望存放新项目的目录：

cd /path/to/your/new/project

1. 执行 vue create 命令：

vue create my-project

这里 my-project 是你的项目名称。命令执行后，Vue CLI 会自动下载相关依赖并在指定目录下创建项目结构。

配置 vue.config.js 文件

为了自定义构建环境，可以修改 vue.config.js 文件设置输出目录、打包方式和环境变量等。

示例配置：

module.exports = {
  outputDir: 'dist',
  publicPath: './',
  // 开启生产环境构建优化
  productionSourceMap: false,
  // 自动检测并使用预编译的组件
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true;
        return options;
      });
  }
};

执行 npm run serve 启动开发服务器，预览项目。

实战：创建页面

在 Vue 应用中，通过添加组件与 Vue 模板语法，构建丰富交互的页面。

添加组件定义页面结构：

创建 src/components/Home.vue：

<template>
  <div class="home">
    <h1>Welcome to My Vue App!</h1>
    <p>Check out the <router-link to="/about">About</router-link> page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
.home {
  text-align: center;
}
</style>

使用 Vue 模板语法编写 HTML：

在 src/App.vue 中引用并使用 Home 组件：

<template>
  <div id="app">
    <Home />
  </div>
</template>

<script>
import Home from '@/components/Home.vue'

export default {
  components: {
    Home
  }
}
</script>

添加样式与交互逻辑：

在 Home.vue 中添加样式与交互逻辑：

<template>
  <div class="home">
    <h1>Welcome to My Vue App!</h1>
    <p>Check out the <router-link to="/about">About</router-link> page!</p>
    <button @click="handleClick">Click me!</button>
    <p v-if="showInfo">This is an info message.</p>
    <p v-else>No info message.</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    handleClick() {
      alert('Welcome to the Home page!');
    },
  },
}
</style>

添加路由功能

实现页面导航，使用 Vue Router。

路由配置：

在 src/router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

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

export default router

在 App.vue 中引入并配置路由：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import router from './router'

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

部署与上线

部署 Vue 应用至生产环境，通常涉及构建与上传流程。

构建生产环境代码：

执行 npm run build 生成生产环境构建的静态文件。

部署步骤：

1. 上传构建文件：
   将 dist 目录下的静态文件上传至服务器或云存储服务，如 Cloudflare Pages、AWS S3 等。

2. 配置域名：
   为应用配置域名，涉及 DNS 记录配置或云平台绑定域名。

3. 服务器配置：
   在服务器上配置 Nginx 或 Apache 等 Web 服务器，确保静态文件正确提供给客户端。例如，在 Nginx 配置文件中添加：

   location / {
      root /path/to/dist;
      index index.html;
   }

   确保 /path/to/dist 为正确的 dist 目录路径。

4. 测试部署：
   访问应用的 URL，确认所有功能正常运行。

总结

通过 Vue CLI，开发者能够高效搭建、构建、部署并最终发布功能完备的 Vue 应用。从基础模板、交互功能到路由管理与部署流程，Vue CLI 提供了全面的工具链与指引。