vue-cli的使用

vue-cli的安装

vue-cli是一个脚手架工具，它集成了诸多前端技术，包括但不仅限于：

• webpack

• babel

• eslint

• http-proxy-middleware

• typescript

• css pre-prosessor

• css module

• ....

这些工具，他们大部分都要依赖两个东西：

• node环境：很多工具的运行环境

• npm：包管理器，用于下载各种第三方库

目前，npm已和node集成，当安装node后，会自动安装npm

安装node

下载node：https://nodejs.org/zh-cn/

验证安装

打开终端，查看node和npm版本，验证是否安装成功:

 node -v
 npm -v

如果安装之前打开了终端，需要在安装后关闭终端，重新打开

配置源地址

默认情况下，npm安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置npm的源地址

使用下面的命令更改npm的源地址为淘宝源

 npm config set registry http://registry.npm.taobao.org/

更改好了之后，查看源地址是否正确的被更改

 npm config get registry

安装vue-cli

使用下面的命令安装vue-cli工具

 npm install -g @vue/cli

安装好之后，检查vue-cli是否安装成功

 vue --version

 

vue-cli的使用

在终端中进入某个目录

选择一个目录，该目录将放置你的工程文件夹

在终端中进入该目录

搭建工程

使用vue-cli提供的命令搭建工程

 vue create 工程名

注意：工程名只能出现英文、数字和短横线