前言

系列文章目录：

[Vue]目录

老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1. Vue 脚手架(CLI)

Vue 脚手架(CLI)是 Vue 官方提供的标准化开发工具（开发平台）

Vue 脚手架(CLI)官网

vue cli的特点：

1. 开箱即用
2. 基于 webpack
3. 功能丰富且易于扩展
4. 支持创建 vue2 和 vue3 的项目

2. Vue CLI 的安装

vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具。

2.1 全局安装 Vue CLI

如果出现下载缓慢可以将下载地址配置为淘宝镜像：

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

npm i -g @vue/cli

2.2 检验是否安装成功

查看 Vue CLI 的版本，检验 Vue CLI 是否安装成功.

vue --version

或者

vue -V

能查看安装的 Vue CLI 的版本，即为安装成功。

3. 使用 Vue CLI 创建项目

Vue CLI 提供了创建项目的两种方式：

1. 基于命令行的方式创建 vue 项目

vue create 项目名称

1. 基于可视化面板创建 vue 项目

vue ui

3.1 基于命令行的方式创建 vue 项目

基于命令行的方式创建 vue 项目，可以使用 Vue CLI 提供的默认预设，也可以自己手动进行预设的配置。

如果之前有自己手动进行预设的配置，并且将配置的预设进行保存，也可以选择直接使用之前的预设配置。

3.1.1 使用 Vue CLI 提供的默认预设创建 vue2 项目

vue create vue_my_test1

键盘上下箭头按键进行选择，enter确定选择

进入创建的项目的目录

cd vue_my_test1

运行项目

npm run serve

访问项目页面

http://localhost:8080/

3.1.2 手动配置预设创建 vue2 项目

步骤1：在终端下运行 vue create 命令

vue create vue_my_test2

步骤2：选择要安装的功能

步骤3：选择 vue 的版本

由于选择安装的功能不同，接下来的选择个数会有所不同

步骤5：使用上下箭头选择如何存储插件的配置信息

通常选择把插件的配置信息存储到单独的文件

步骤6：是否将刚才的配置保存为预设

根据需要选择是否保存

项目创建完成