第一个 vue-cli项目
第一个 vue-cli项目
什么是vue-cli
vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速
主要的功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
需要的环境:
- Node.js : http://nodejs.cn/download/
- Git : https://git-scm.com/doenloads
- Git镜像 :https://npm.taobao.org/mirrors/git-for-windows/
可以使用如下语句进行验证:
1.安装Node.js淘宝镜像加速器(cnpm)
# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org
安装的位置:C:\用户\xxxx\AppData\Roaming\npm
2.安装vue-cli
cnpm install vue-cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack
vue list
创建第一个Vue-cli项目
1.创建一个 Vue项目 文件夹
2.cmd 进入这个文件夹的目录下
vue init webpack xxxx
即:在该目录下创建一个vue-cli项目
- 前三个就是填 项目名、项目描述、作者名
- 第四个选择 第一个
- 后面的全部 no
完成后会出现一个文件夹,内容为 :
3.初始化并运行
cd xxxx #进入新出来的文件夹,xxxx即你上面的文件夹名
npm install # 全局安装
npm run dev # 运行