第一个 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

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

2

创建第一个Vue-cli项目

1.创建一个 Vue项目 文件夹

2.cmd 进入这个文件夹的目录下

vue init webpack xxxx

即：在该目录下创建一个vue-cli项目

3

• 前三个就是填 项目名、项目描述、作者名
• 第四个选择 第一个
• 后面的全部 no

完成后会出现一个文件夹，内容为 :

4

3.初始化并运行

cd xxxx   #进入新出来的文件夹，xxxx即你上面的文件夹名

npm install    # 全局安装

npm run dev    # 运行

5

6

个人博客为： MoYu’s Github Blog MoYu’s Gitee Blog