Vue CLI 安装及使用方法

目录

一、CLI 是个啥？

二、Vue CLI 是个啥？

三、Vue CLI 在使用前准备啥？

四、Vue CLI 安装和使用

---

一、CLI 是个啥？

CLI 是 Command-Line Interface，翻译为命令行界面，但是俗称脚手架。Vue CLI 是一个官方发布 vue.js 项目脚手架。使用 Vue CLI 可以快速搭建 Vue 开发环境以及对应的 webpack 配置，这给前端工程师开发项目提供了很大的帮助。Vue CLI官网

二、Vue CLI 是个啥？

如果你只是简单写几个 Vue 的 Demo 程序，那么你不需要用 Vue CLI。如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI。使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，无疑效率比较低，通常我们会使用一些脚手架工具来帮助完成这些事情。

三、Vue CLI 在使用前准备啥？

1、node.js：如果想安装 Vue CLI 的老弟还没装 node.js 的话，请移步 这嘎达。

验证是否安装成功可在 cmd 命令行输入：node -v  和 npm -v 查看相应的安装版本。

2、webpack：Vue CLI 依赖 webpack，这个可以在命令行直接 cmd 全局安装：npm install webpack -g

验证是否安装成功可在命令行输入：npm info webpack 查看相应的版本等信息。webpack 文档

3、安装过程中如果遇到 rollback failed optional 这类的提示，可以将 npm下载镜像改为淘宝镜像：

查看npm下载镜像地址：npm config get registry

设置npm为淘宝镜像：npm config set registry http://registry.npm.taobao.org

然后可以执行 npm config get registry 查看镜像地址，如果没问题的话会出现 "http://registry.npm.taobao.org"。

ps：推荐安装切换源工具帮助管理你的镜像：nrm。如果你用 yarn，则可以安装 yrm 来管理你的下载镜像。

四、Vue CLI 安装和使用

1、cmd 命令行全局安装 Vue CLI：npm install -g @vue/cli

验证是否安装成功可在命令行输入：vue --version 或者 vue -V 查看安装版本。

2、Vue CLI3 创建新项目就可以通过 cmd 命令行：vue create 项目名称    在对应的文件目录下创建项目了。

创建项目的详细步骤和配置选项可以参考这里：通过 Vue CLI 创建新项目

 

时时刻刻必须提醒你自己，不能搭讪，搭讪你就破功了，老弟