开发环境准备

工欲善其事，必先利其器。在开发一个完整的项目之前，准备一个完整的开发环境是非常重要的。当然，如果你是一个前端大佬，可能这些环境早已用得滚瓜烂熟，如果你刚入坑前端，就跟着笔者一步一步搭建环境吧。

安装代码编辑器Sublime Text 3

目前笔者比较习惯使用 Sublime Text 3 这款编辑器，下载地址是 https://www.sublimetext.com/3 ，然后选择合适的平台来安装，如图12-1所示。

Figure 1. 图12-1　Sublime Text 3编辑器

除了 Sublime Text 3 编辑器之外，我们再来聊聊其他比较常用的前端代码编辑器、它们的特点以及如何选择合适的代码编辑器。

当前流行的代码编辑器主要有 Visual Studio Code、Sublime Text 3、WebStorm 三种，笔者觉得代码编辑器完全可以根据自己的喜好和习惯决定，并没有一个完全正确的答案，正所谓萝卜白菜，各有所爱。从当前的趋势来看，Visual Studio Code 的使用者更多一些，这可能得益于精美的界面风格和完善的插件生态，笔者之前使用的就是这款编辑器；WebStorm 的功能也很强大，但是太过笨重。这次之所以没有选择这两个编辑器，而是选择 Sublime Text，是为了体验一下新鲜的事物。从效果上来看，Sublime Text 3 更加轻便，如果长时间操作，也不会感觉卡。总之这三种编辑器的功能都可以满足日常的开发需求，读者选择自己喜欢的编辑器即可。

安装 cnpm

在保证安装 Node.js 的前提下，都会用 npm 来安装相关包模块，在这里需要说明一下，当我们使用 npm 来安装包时，如果遇到安装时间过长、无法连接，大部分原因是 npm 包的源地址默认是国外的地址，国内的网络会对这些地址进行屏蔽，这时就推荐使用国内的 npm 镜像来安装包。注意，如果项目中需要有依赖锁定，不建议使用 cnpm。

使用 cnpm（淘宝 npm 镜像）来安装 npm 包，使用起来非常简单，首先安装 cnpm，在 cmd 终端执行下面的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

上面的命令全局安装了 cnpm，安装成功后，就可直接使用 cnpm install xxx 来安装相关的包了。cnpm 的命令完全兼容 npm 的命令，代码如下：

npm install vue 相当于 cnpm install vue
npm uninstall vue 相当于 cnpm uninstall vue
npm search vue 相当于 cnpm search vue

cnpm 镜像会定时与官方 npm 同步最新的包，频率目前为 10 分钟一次，以保证 cnpm 尽量能够及时获取到全球各地提交的最新的包。

我们在后续的实战项目中都会使用 cnpm 来安装包。在完成开发前的环境准备后，接下来进入项目开发。

Vite项目初始化

参考之前的 Vite 章节，采用 npm 工具来安装 Vite，在安装的同时可以直接进行项目的初始化操作，最终得到的项目目录大致如图12-2所示。

Figure 2. 图12-2　项目目录结构

添加项目的构建配置，修改 vite.config.js，其核心代码如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

import path from "path";

export default defineConfig({
    base: './', // 项目根路径
    plugins: [vue()],// 配置vue插件
    resolve: {
        // 配置路径别名
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
    server: {
        port: 3001,
        proxy: {
            // 使用 proxy 实例
            // 模拟请求豆瓣电影后台真实数据
            '^/api': {
                target: 'https://frodo.douban.com',
                changeOrigin: true,
                // 模拟referer和ua
                headers: {
                    'referer': 'https://servicewechat.com/wx2f9b06c1de1ccfca/84/page-frame.html',
                    'user-agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.16(0x18001042) NetType/WIFI Language/zh_CN'
                }
            }
        }
    }
})

上述配置主要包括 Vue 文件解析配置、开发环境下的 devserver 配置（包括模拟请求豆瓣电影后台的真实数据）、路径别名配置、项目根路径配置等，可以看出相比 vue-cli 工具来说，Vite 的配置要更加简洁一些。

由于我们的项目会使用到 Vue Router、Vuex、Axios、Less 等模块，而这些模块不会在 Vite 中预先安装，所以需要自己提前安装：

cnpm install vuex vue-router axios less less-loader -S

当然这里并不是安装全部模块，其余模块后面用到时再安装即可。在一切都配置完成后，执行 npm run serve 命令。