Vue CLI 脚手架详解：快速构建 Vue.js 项目的利器

旧言.

于 2023-06-15 10:44:00 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43749805/article/details/131223036

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

VueCLI是Vue.js的官方脚手架，用于快速搭建项目结构。本文详细介绍了如何安装VueCLI，创建项目，理解项目结构，以及进行开发和构建过程。此外，还讨论了插件的安装和配置文件的使用，如设置VueRouter和代理配置。

摘要由CSDN通过智能技术生成

一、安装和创建项目

首先，需要安装 Vue CLI。在命令行中执命令安装：

npm install -g @vue/cli

安装完成后，使用 vue create 命令来创建一个 Vue.js 项目：

vue create my-project

创建项目的过程中，Vue CLI 会提供一系列选项供你选择，包括预设配置、插件安装等。可以选择默认配置，也可以根据需要进行自定义配置。

二、项目结构

Vue CLI 会根据你的选择和配置，在项目文件夹中生成一系列文件和目录，其主要结构如下：

src：存放项目源代码的目录。
- assets：存放静态资源文件，如图片、样式文件等。
- components：存放 Vue 组件文件。
- views：存放页面级组件文件。
- App.vue：项目的根组件。
- main.js：项目的入口文件。
public：存放公共静态资源的目录，如 HTML 文件、favicon 等。
node_modules：存放项目依赖的目录。
package.json：存放项目配置和依赖信息的文件。

三、开发和构建

Vue CLI 提供了一组命令来支持项目的开发和构建：

npm run serve：启动开发服务器，实时编译和热重载，用于开发阶段的调试和预览。
npm run build：构建生产环境的项目代码，生成优化后的静态文件，用于部署到生产环境。
npm run lint：对代码进行静态检查和格式化，以确保代码质量和一致性。

四、插件和配置

Vue CLI 提供了丰富的插件和配置选项，用于增强项目开发的功能和体验。可以通过以下方式来扩展和配置项目：

插件：Vue CLI 支持安装和使用插件，例如 Vue Router、Vuex、axios 等。可以使用 vue add 命令来安装插件：

vue add router

配置文件：Vue CLI 使用 vue.config.js 文件来配置项目。通过这个文件，可以进行各种配置，如自定义打包配置、代理设置、环境变量等。

// vue.config.js
module.exports = {
  // 自定义配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}