前言
系列文章目录:
老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. Vue 脚手架(CLI)
Vue 脚手架(CLI)是 Vue 官方提供的标准化开发工具(开发平台)
vue cli的特点:
- 开箱即用
- 基于 webpack
- 功能丰富且易于扩展
- 支持创建 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 提供了创建项目的两种方式:
- 基于命令行的方式创建 vue 项目
vue create 项目名称
- 基于可视化面板创建 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:是否将刚才的配置保存为预设
根据需要选择是否保存
项目创建完成