Vue CLI 脚手架简介及安装

• 前言
• 1. Vue CLI 简介
• 2. 安装 node
• 3. 安装 Vue CLI
• 4. 安装 Webpack
• 5. 在 Vue CLI 3 中使用 Vue CLI 2

前言

---

如果只是简单写几个 Vue 的 demo 程序, 那么不需要使用 Vue CLI 来写

但是如果你在开发大型项目, 那么必然需要使用 Vue CLI。使用 Vue 开发大型应用时，我们需要考虑代码的目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都需要手动完成这些工作，那无疑效率比较低效，所以我们通常会使用一些脚手架工具来帮助完成这些事情

1. Vue CLI 简介

---

Vue CLI 作用: 快速搭建 Vue 开发环境以及对应的 webpack 配置

CLI: Command Line Interface，翻译为: 命令行界面, 俗称为: 脚手架

Vue CLI 是一个官方发布的 Vue.js 脚手架，致力于将 Vue 生态中的工具基础标准化

Vue CLI 是一个基于 vue.js 进行快速开发的完整系统，是一个全局安装的 npm包，基于webpack构建，丰富的官方插件集合，集成了前端生态中最好的工具，一套完全图形化的创建和管理 Vue.js 项目的用户界面

2. 安装 node

---

因为 vue cli 是一个npm包，所以需要安装 node，因为 npm 是用 node 写的

npm（node package manager）node.js 包管理工具，用于插件管理、包管理、安装卸载管理依赖

a. 进入 nodejs 中文网，下载最新的稳定版

http://nodejs.cn

b. 查看 node、npm 版本

安装node时，npm也自动给安装上了

node -v

npm -v

c. 配置npm国内镜像

百度搜索 cnpm

https://developer.aliyun.com/mirror/NPM?from=tnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

d. 查看镜像

npm get registry

3. 安装 Vue CLI

---

全局安装 (install 可以简写为 i)

npm install -g @vue/cli

查看 Vue CLI 版本

vue --version // 可以简写为 vue -V

4. 安装 Webpack

---

全局安装

npm install webpack -g

5. 在 Vue CLI 3 中使用 Vue CLI 2

---

全局安装一个侨接工具

npm install -g @vue/cli-init

初始化 Vue CLI 2 项目

vue init webpack my-project

初始化 Vue CLI 3 项目

vue create my-project