创建vue项目，使用vue-cli搭建项目脚手架

一、vue-cli介绍

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

1、webpack

2、babel

3、eslint

4、http-proxy-middleware

5、typescript

6、css pre-prosessor

7、css module

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

1、node环境：很多工具的运行环境

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

二、安装node

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

验证安装

node -v
npm -v

配置源地址

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

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

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

更改之后，查看源地址是否正确被修改

npm config get registry

三、 安装vue-cli

npm install -g @vue/cli

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

vue --version

vue-cli的使用

在终端中进入某个目录

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

搭建工程

vue create 工程名

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

安装依赖

工程搭建好后，在终端中进入工程目录

cd 工程名

npm i

Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset:
  default (babel, eslint)
> Manually select features                                                                                          
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel --兼容性配置
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  
 
Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json    

Vue CLI v4.4.6
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
  Use Yarn
> Use NPM    

运行

 npm run serve