Vue CLI是Vue.js官方推荐的创建和管理Vue.js项目的工具。通过提供一系列标准化的工具和流程,它帮助开发者提高开发效率,快速构建现代化的web单页面应用。
一、Vue是什么?
Vue CLI是Vue.js官方推荐的创建和管理Vue.js项目的工具。通过提供一系列标准化的工具和流程,它帮助开发者提高开发效率,快速构建现代化的web单页面应用。它具备以下核心特性:
1. 交互式脚手架:Vue CLI提供了一套交互式脚手架,可以根据用户的选择自动生成项目结构,包括目录、文件和预设配置,从而极大地简化了项目的初始化过程。
2. 自动化服务依赖管理:Vue CLI能够自动处理项目中的服务依赖,如热重载、代码压缩等,使开发者能够专注于应用的业务逻辑开发,提高开发效率。
3. 运行环境要求:为了使用Vue CLI,开发者需要先安装Node.js和npm(Node.js包管理器),因为Vue CLI是基于Node.js运行的。
4. 灵活的插件系统:Vue CLI支持插件系统,允许开发者根据项目需求添加或移除功能,从而提供了高度的灵活性和可扩展性。
5. 一致的开发体验:Vue CLI与Vue.js生态系统紧密集成,提供了一致的开发体验,同时支持Vuex、Vue Router等库的无缝配合,使开发者能够更加便捷地开发Vue.js应用。
6. 多页面应用支持:除了支持传统的单页面应用(SPA)外,Vue CLI还提供了对多页面应用(MPA)的支持,满足了不同项目的需求。
二、安装步骤
1.安装Node.js
官网:Node.js — Run JavaScript Everywhere (nodejs.org)
点击Download进行下载,安装。
下载完成后进行安装,一直点击next。
注意点击 I accept the terms in the License Agreement
2.检查npm命令是否可用
输入:npm -v
C:\Users\用户名>npm -v
10.5.0
出现这些内容表示npm可用。
3.配置npm源
npm config set registry https://registry.npmmirror.com
npm config get registry
4. 安装VUE Cli
安装VUE CIi的命令如下:
npm insta11 -g @vue/cli
安装完成后,可通过以下命令检验VUECIi是否安装成功
vue -V V是大写
C:\Users\用户名>vue -V
@vue/cli 5.0.8
出现这些内容表示安装成功。
5.创建工程
点击进入IntelliJ IDEA ,点击下方的终端输入
vue create 工程名称
Eg:
vue create project1
用上下的键盘按钮,向下选择第三个,点击回车Enter
使用上下按钮,用空格键进行选择和取消,完成后点击Enter回车
选择3.x 点击回车
输入Y 确定
选择第二个In package.json 点击回车
输入N 点回车
加载到这一步,先输入 cd project1
PS D:\JAVA\Web> cd project1
在输入npm run serve
PS D:\JAVA\Web>project1> npm run serve
这个时候就创建好了
点击上面的Local的url,可以出现这个页面