今天使用 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 项目就跑起来了,效果如图一所示。