Vue 开发环境

7、Vue 开发环境

7.1、Vue CLI 脚手架工具

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以自动生成 Vue.js + webpack 的项目模板。

Vue CLI 提供了强大的功能，用于定制新项目、配置原型、添加插件和检查 webpack 配置。

@vue/cli 3.x 版本可以通过 vue create 命令快速创建一个新项目的脚手架。

7.1.1、安装前的注意事项

如果已经全局安装了旧版的 vue-cli，需要通过如下命令进行卸载。

npm uninstall vue-cli -g

如果 vue-cli 是通过 yarn 命令安装，则需要使用 yarn global remove vue-cli 命令卸载。再重新安装新版的 @vue/cli

7.1.2、全局安装 @vue/cli

通过 npm 方式全局安装 @vue/cli 脚手架

npm install @vue/cli@3.10 -g

7.1.3、使用 vue create 命令创建项目

vue create hello-vue

7.1.4、使用 GUI 创建项目

vue ui

7.2、插件

Vue 中插件的功能非常强大，给项目开发者提供了方便，提高了开发效率。

7.2.1、CLI 插件

在 Vue CLI 中使用了一套基于插件的架构，将部分核心功能插件添加到脚手架 Vue CLI 中，为开发者暴露可拓展的 API 以供开发者对 Vue CLI 的功能进行灵活的使用。

7.2.2、安装插件

在项目目录下，使用 vue add 指令可以安装插件。

vue add router
vue add vuex
vue add vuetify

7.3、CLI 服务和配置文件

7.3.1、CLI 服务

在 Vue 项目中需要使用 npm run serve 指令来启动项目，其中的 serve 的内容指的就是 vue-cli-service 命令，项目的启动需要借助于 vue-cli-service 来完成。

7.3.2、配置文件

vue-cli3 引入了全局配置文件的功能，如果项目的根目录中存在 vue.config.js 文件，就会被 @vue/cli-service 模块自动加载。

因此，vue.config.js 是一个可选的配置文件。