Vue-Cli

Vue-cli

1.1 什么是vue-cli

• vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
• 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能:

• 统一的目录结构、本地调试、热部署、单元测试、集成打包上线

1.2 安装环境

安装 Node.js 环境

下载地址： http://nodejs.cn/download/

• 安装就无脑下一步即可，安装在本机的环境目录中，安装完成会自动配置环境变量，无需手动配置。

安装Git环境（暂时不需要）

下载地址: https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/

• cmd 下输入node -v ,查看是否能够正确打印出版本号即可，安装完成软件自带配置环境变量。
• cmd 下输入npm-v ,查看是否能够正确打印出版本号这个npm,就是一个软件包管理工具，安装node.js自带npm。

C:\Users\17312>node -v
v14.15.4

C:\Users\17312>npm -v
6.14.10

安装cnpm环境

cnpm：Node.js 淘宝镜像加速器，下载资源会很快。但是项目部署时可能会出现打包失败问题。

#-g就是全局安装global
npm install cnpm -g

#或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的位置：C:\Users\17312\AppData\Roaming\npm ----------(需要显示隐藏文件)

安装vue-cli

cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue 应用程序，通常我们选择webpack
vue list

1.3 快速入门

1. 创建一个Vue项目,建立一个空的文件夹在电脑上,在D盘下新建一个目录D:\IdeaProjects\Vue_Study ;
2. 创建一个基于webpack模板的vue应用程序

#这里的 myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue
#一路都选择no即可;

执行步骤

创建好的项目结构

进入项目，安装依赖环境

项目根据package.json文件来安装依赖版本

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210115185629430.png）
根据提醒处理错误

使用IDEA打开项目，查看目录结构

在控制台启动当前项目

npm run dev

项目启动成功

查看主页

如果在IDEA中允许npm run dev 不能启动项目，需要修改管理员权限

• 使用IDEA中的命令行默认不是管理员方式，修改为管理员

在IDEA中启动项目

前端项目启动成功