1. 前言

我们通过上一节的内容 《Vue-Webpack（四）》知道了如何通过 Webpack 构建 Vue ，但通过哪种方式在实际开发中肯定是不现实的。所以需要引入专门构建 Vue 的脚手架 进行开发

2. 脚手架

目前 Vue 提供了两种脚手架的开发工具，分别是 Vue CLI 和 Vite ，其中 Vue CLI 现已处于维护模式!

2.1. Vue Cli

官网地址：https://cli.vuejs.org/zh

尽量使用 cmd 命令窗口进行执行命令

2.1.1. 第一步：安装 Vue CLI

  • 安装指定版本的 Vue Cli
1
npm install -g @vue/cli@3.7.0

image-20230811234747151

2.1.2. 第二步：创建项目

  • 指令
1
vue ui

image-20230811234932062

  • 详情

image-20230811235104195

  • 预设

image-20230811235354853

image-20230811235311608

  • 功能

image-20230811235523411

  • 配置

image-20230811235608553

image-20230811235648342

  • 创建完成

image-20230811235847399

2.1.3. 第三步：目录结构

  • 图解

image-20230812000010999

  • 目录说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
my-vue-app/          // 项目根目录
├── public/           // 静态资源文件夹
│   ├── index.html    // 入口 HTML 文件
│   ├── ...
│
├── src/              // 项目源代码文件夹
│   ├── assets/       // 存放静态资源（图片、样式等）
│   ├── components/   // Vue 组件文件夹
│   ├── views/        // 页面级别的 Vue 组件文件夹
│   ├── App.vue       // 应用程序的根组件
│   ├── main.js       // 入口 JavaScript 文件
│   ├── ...
│
├── node_modules/     // 依赖模块文件夹
│
├── .gitignore        // Git 忽略配置文件
├── babel.config.js   // Babel 配置文件
├── package.json      // 项目配置和依赖列表
├── README.md         // 项目说明文件
├── vue.config.js	  // 项目构建过程的配置文件

2.1.4. 第四步：配置 vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
  // 基本路径
  publicPath: "./",
  // 构建时的输出目录
  outputDir: "dist",
  // 放置生成的静态资源目录
  assetsDir: "static",
  // 指定html输出路径
  indexPath: "index.html",
  // 设置语法检查
  lintOnSave: false,
  // 设置是否需要sourceMap
  productionSourceMap: false,
  // 配置开发环境下的一些服务器配置
  devServer: {
    open: true,
    port: 8080,
    proxy: {
      // 配置代理
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ""
        }
      }
    }
  }
}

2.1.5. 第五步：运行项目

  • 指令
1
npm run serve

image-20230812000237970

2.2. Vite

Vite 是一个基于现代浏览器原生 ES 模块系统的构建工具，专为开发 Vue.js 单页面应用（SPA）而设计的。与传统的打包工具（如Webpack）不同，Vite 采用了一种更快、更轻量级的开发模式，能够在开发阶段实现即时的、按需加载。

官方文档：https://cn.vitejs.dev/guide/