使用vue-cli脚手架快速搭建vue项目详解

选择终端工具

开始之前，先选择一个命令终端工具。

• cmd win+r
• PowerShell
• vscode 终端工具快捷键ctrl+shift+`

本文使用win10 自带的cmd终端工具。

安装vue-cli

// npm 
npm install @vue/cli -g

//yarn
yarn global add @vue/cli

查看已安装vue-cli 版本

vue -V
vue --version

查看vue-cli脚手架版本列表

npm view @vue/cli versions

卸载vue-cli

//npm 
npm uninstall -g @vue/cli

//yarn
yarn global remove @vue/cli

Preset 预设

什么是预设？

Preset是一个在创建新项目中所需要预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

预设的作用

在使用vue-cli脚手架命令vue create hello 的项目中，它会让你选取一个preset。一般都是选择默认。如下图：

如果不想每次创建项目都需要去选择一下preset，可以创建一个preset.json配置文件或者使用远程预设，然后在创建项目时，指定preset文件就可以了。

创建一个preset.json预设文件

{
    "useConfigFiles": true,
    "cssPreprocessor": "sass",
    "plugins": {
      "@vue/cli-plugin-babel": {},
      "@vue/cli-plugin-eslint": {
        "config": "airbnb",
        "lintOn": ["save", "commit"]
      },
      "@vue/cli-plugin-router": {},
      "@vue/cli-plugin-vuex": {}
    }
}

创建一个hello_v2项目，并且指定预设文件之后。就直接安装preset.json的预定义选项和插件。则不需要我们再去在命令中选取预设。下图运行之后，直接安装，如图：

创建帮助

D:\mvvm>vue create --help
Usage: create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
Options:
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

创建一个项目

vue-cli脚手架提供两个创建项目的命令，vue ui适合刚学习vue-cli脚手架的朋友。

• vue create 命令行创建vue项目
• vue ui 图形化界面创建vue项目

命令行创建项目

//选择预设
vue create hello

//使用preset.json里预设
vue create --preset preset.json hello

图形化创建

vue ui

执行vue ui 命令会打开一个浏览器窗口，并以图形化界面引导至项目创建的流程。