vue-cli
1. vue-cli
vue-cli(俗称:vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。
特点:
① 开箱即用
② 基于 webpack
③ 功能丰富且易于扩展
④ 支持创建 vue2 和 vue3 的项目
2. 安装 vue-cli
vue-cli 是基于 Node.js 开发出来的工具,因此需要使用 npm 将它安装为全局可用的工具。
全局安装 vue-cli
npm i -g @vue/cli
查看 vue-cli 的版本,检验 vue-cli 是否安装成功
vue --version
2.1 解决 Windows PowerShell 不识别 vue 命令的问题
Windows PowerShell:
shift + 鼠标右键 打开
默认情况下,在PowerShell 中执行 vue --version 命令会提示如下的错误消息:
解决方案如下:
① 以管理员身份运行 PowerShell
② 执行set-ExecutionPolicy RemoteSigned
命令
③ 输入字符 Y ,回车即可
3. 创建项目
vue-cli 提供了创建项目的两种方式:
-
基于命令行的方式创建 vue 项目
vue create 项目名称
-
基于可视化面板创建 vue 项目
vue ui
4. 基于 vue ui 创建 vue 项目
步骤1:在终端下运行 vue ui 命令,自动在浏览器中打开创建项目的可视化面板
步骤2:在详情页面填写项目名称
步骤3:在预设页面选择手动配置项目
可以选择之前配置好的也可以重新配置
步骤4:在功能页面勾选需要安装的功能
根据需要选择
步骤5:在配置页面勾选 vue 的版本和需要的预处理器
步骤6:将刚才所有的配置保存为预设(模板),方便下一次创建项目时直接复用之前的配置
可以根据需要进行选择。
vue ui 的本质:
通过可视化的面板采集到用户的配置信息后,在后台基于命令行的方式自动初始化项目。
项目创建完成后,自动进入项目仪表盘
5. 基于命令行创建 vue 项目
步骤1:在终端下运行 vue create demo2 命令,基于交互式的命令行创建 vue 的项目
步骤2:选择要安装的功能
步骤3:使用上下箭头选择 vue 的版本,并使用回车键确认选择
路由是否使用历史模式(由选中路由才需要选中,根据需求选择)
步骤4:使用上下箭头选择要使用的 css 预处理器,并使用回车键确认选择
步骤5:使用上下箭头选择如何存储插件的配置信息,并使用回车键确认选择
步骤6:是否将刚才的配置保存为预设
开始创建项目并自动安装依赖包
项目创建完成
运行项目
cd demo2
npm run serve
复制网址打开