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 快速入门
- 创建一个Vue项目,建立一个空的文件夹在电脑上,在D盘下新建一个目录D:\IdeaProjects\Vue_Study ;
- 创建一个基于webpack模板的vue应用程序
#这里的 myvue是项目名称,可以根据自己的需求起名
vue init webpack myvue
#一路都选择no即可;
执行步骤
创建好的项目结构
进入项目,安装依赖环境
项目根据package.json文件来安装依赖版本
根据提醒处理错误
使用IDEA打开项目,查看目录结构
在控制台启动当前项目
npm run dev
项目启动成功
查看主页
如果在IDEA中允许npm run dev 不能启动项目,需要修改管理员权限
- 使用IDEA中的命令行默认不是管理员方式,修改为管理员
在IDEA中启动项目
前端项目启动成功