Vue CLI 3.0(安装篇)

#安装

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

安装命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查其版本是否正确 (3.x)：

vue --version

创建项目

#vue create

运行以下命令来创建一个新项目：

vue create hello-world

警告
如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

image.png

第一次创建的时候 没有前一个的，后两个默认的，我们就选择最后一个自定义的。如果保存有模版则可以直接从模板生成。
手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

image.png

当你选择后会出现上面图上的东西，这里你可以自由选择用哪些配置，按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步.

image.png

下一步之后问询问你安装哪一种 CSS 预处理语言，根据个人喜好

image.png

上面这个是问你选择哪个自动化代码格式化检测.

image.png

是否保存刚才的配置，选择确定后你下次再创建新项目就可以用之前的配置，这个也可以修改。

image.png

babel,postcss,eslint配置文件放的位置
第一个是放独立文件放置 第二个是：放package.json里
这里推荐放单独配置文件

image.png

是否将以上这些将此保存为未来项目的预配置吗？你随意选择，点击确定就开始下载模板了

#使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

image.png