Vue CLI脚手架安装全过程及遇到的问题解决

今天使用 Vue 官方的一个脚手架工具 Vue CLI 创建了一个项目，顺便把安装过程和遇到的问题整理了一下。效果如下图：

首先介绍一下 Vue CLI 是什么？官方的介绍如下：

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service)，该依赖：可升级，基于 webpack 构建，并带有合理的默认配置，可以通过项目内的配置文件进行配置，可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装：

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

如果 npm 安装太慢，可以用 cnpm 来安装。

如果您没有安装过 cnpm 需要先安装：

npm install cnpm -g

然后用 cnpm 进行安装：

cnpm install -g @vue/cli

安装期间遇到了一个问题，报错如下：

ERROR  Error: Command failed: git add -A
fatal: LF would be replaced by CRLF in .browserslistrc

解决方法：

git 在 windows 下，默认是 CRLF 作为换行符，git add 提交时，检查文本中有LF 换行符（linux系统里面的），则会告警。所以问题的解决很简单，让git忽略该检查即可。执行如下命令：

git config --global core.autocrlf false

也可以找到 git 的配置文件进行修改，找到 C:\Users\用户名.gitconfig ，用记事本打开，在 core 下添加一行：

[core]
    autocrlf = false

安装之后，就可以在命令行中访问 vue 命令。可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version
# OR
vue -V //注意是大写的V

创建一个新项目

vue create w3h5

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

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

创建成果后运行如下命令，启动这个项目：

cd w3h5
npm run serve

根据提示，在浏览器输入显示地址，即可直接访问：

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.199.166:8080/

这样我们的 Vue 项目就跑起来了，效果如图一所示。

声明：本文由w3h5原创，转载请注明出处：《Vue CLI脚手架安装全过程及遇到的问题解决》 https://cloud.tencent.com/developer/article/1537781