使用 Vue-Cli3 搭建 SPA 应用，从零到一完整实践-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue-Cli 是 Vue.js 官方提供的一个 CLI 工具，用于快速构建基于 Vue.js 的应用程序，但是在 Vue-Cli 3 版本之前，如何使用 vue-cli 进行前端项目的构建还是一件有挑战性的事情，需要对项目的各个细节进行极其细致的设置，容易出现各种问题，如：webpack 配置、eslint 等。

Vue-Cli 3 的大胆创新，使用了模块化的配置方式，解决了这些问题，使用起来变得更为便捷和易用。

本文将详细介绍如何使用 Vue-Cli3 快速搭建 SPA 应用的过程。

环境准备

Node.js v8.9.0 或更高版本
npm 或 yarn 包管理工具

安装 Vue-Cli

推荐使用 yarn 进行安装。先全局安装 yarn：

npm install yarn -g

安装 Vue-Cli：

yarn global add @vue/cli

安装完毕后，使用下面的命令查看 vue-cli 版本号：

vue --version

如果版本号显示正常，表示 Vue-cli 安装成功。

创建项目

使用命令行工具，进入到新建项目的目录中，然后执行以下命令：

vue create <projectName>

其中 projectName 为项目名称，请根据自己的需求修改。

执行后，会出现一个交互式的命令行界面，询问我们是否需要预设配置：

Vue CLI v3.0.0
? Please pick a preset: 
  Manually select features
  default (babel, eslint)
> default (babel, eslint)

由于我们这里用于开发单页应用，选默认配置就可以，因此选择 default 。

选择完毕后，vue-cli 会下载相关依赖，需要一点时间等待，通常需要几分钟的时间。

项目结构分析

项目结构分析如下：

// javascriptcn.com 代码示例
my-project
├── README.md
├── node_modules
├── babel.config.js
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

public 目录下是不经过 webpack 处理的静态资源。
src 目录是我们主要的开发目录，包含了项目入口、页面组件、存放图片、css 等。

运行项目

进入 my-project 目录，通常，我们需要先执行安装：

cd my-project
yarn install

然后运行开发环境：

yarn serve

或执行以下npm命令：

npm run serve

执行完成后，浏览器将自动打开项目首页。

构建与部署

要进行生产环境构建，则执行以下命令：

yarn build

此命令将构建生产环境使用的项目文件，通常文件构建在 dist 目录下，如果生成了生产环境需要部署的代码，我们可以将 dist 目录复制到服务器上进行部署。

项目总结

Vue-Cli3 已经成为了开发 Vue.js 应用程序的首选工具，使用它可以让项目构建更加迅速，而且将配置模块化，可以使开发人员更好地理解项目结构和依赖关系，省去了很多不必要的时间和麻烦。希望这篇文章对大家学习使用 Vue-Cli3 有所帮助，欢迎交流和讨论。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c39367d4982a6eb5d4148