Vue:第一个vue-cli项目

什么是vue-cli

  vue-cli官方提供的一个脚手架,用于快速生成一一个vue的项目模板;

  预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能:

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

需要的环境

●Node.js : http://nodejs.cn/download/
安装就无脑下一步就好,安装在自己的环境目录下

●Git : https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/
确认nodejs安装成功:
●cmd下输入node -v，查看是否能够正确打印出版本号即可!
●cmd下输入npm -v ,查看是否能够正确打印出版本号即可!

  这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!

  安装 Node.js 淘宝镜像加速器(cnpm)

  这样子的话,下载会快很多~

  安装过程可能有点慢~ ,耐心等待!虽然安装了cnpm,但是尽量少用!

  安装的位置: C:\Users \Administrator\AppData \Roaming\npm

安装vue-cli

第一个vue-cli应用程序

1. 创建一个Vue项目，我们随便建立一-个空的文件夹在电脑.上我这里在D盘下新建一个目录D:\Project\vue-study ;
2. 创建一个基于webpack模板的vue应用程序

一路都选择no即可;

说明：

● Project name:项目名称，默认 回车 即可
● Project description: 项目描述，默认 回车 即可
● Author: 项目作者，默认 回车 即可
● Install vue-router:是否安装vue-router,选择 n 不安装(后期需要再手动添加)
● Use ESLint to lint your code:是否使用ESLint做代码检查，选择 n 不安装(后期需要再手动添加)
● Set up unit tests: 单元测试相关，选择 n 不安装(后期需要再手动添加)
● Setup e2e tests with Nightwatch:单元测试相关，选择 n 不安装(后期需要再手动添加)
● Should we run npm install for you after the project has been created:创建完成后直
接初始化，选择 n ，我们手动执行;运行结果!

初始化并运行