Vue-CLI3 脚手架搭建教程（全都是图）

脚手架是什么

Vue 脚手架用于快速生成 Vue 项目基础架构，网址：Vue CLI

安装脚手架：

npm install -g @vue/cli

使用命令行创建项目

在终端中输入如下命令进入交互式命令行：

vue create project

这个界面让你选择创建的模式，按上下键可以移动，分别为：

• 默认：vue2
• 默认：vue3
• 手动选择

如果选择手动，会变成下面界面：

按下 a 选择所有，按下 i 反向选择，按下空格选择当前，选择完毕按下回车确认。

弹出下面界面：

这个界面让选择使用的 vue 版本，按回车确认。

弹出下面界面：

是否启用历史路由，

选择 ESLint 的版本，建议选择 Standard config。

何时进行 lint 语法校验，选择 Lint on save。

将配置项保存到哪里？

• In dedicated config files：保存到单独的配置文件中
• In package.json：保存到 package.json 中

为了方便维护建议选择第一个。

是否保存本次的选择，如果保存，下次创建项目可以使用本次的配置。

如果操作成功，会显示这个页面：

正在下载所需的配置文件，下载完成之后项目创建完毕。

这时会弹出提示：

输入上述命令，得到以下界面：

使用图形化创建项目

在终端中输入 vue ui 会打开浏览器页面。和上述操作类似。

自定义配置

在项目创建完成之后，默认的端口为 8080，可以通过两种方式进行配置：

• package.json
• vue.config.js（推荐）

如果使用 package.json 需要在文件中新建一个 vue 节点，vue 节点中有 devServer 配置项。如下所示：

"vue": {
     
  "devServer":{
     
    "port": 8888, //端口号 8888
    "open": true //打包完成打开页面
  }
}

如果使用 vue.config.js 需要在项目根目录中建立 vue.config.js 文件，文件中通过 module.exports 向外暴露配置信息。如下代码所示：

module.exports = {
     
  devServer: {
     
    port: 8888, // 端口号 8888
    open: true // 打包完成打开页面
  }
};