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

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

Vue CLI脚手架安装全过程及遇到的问题解决 经验总结 第1张

首先介绍一下 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

Vue CLI脚手架安装全过程及遇到的问题解决 经验总结 第2张

解决方法:

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 CLI脚手架安装全过程及遇到的问题解决 经验总结 第3张

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

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)