Vue-cli的安装与使用

一、基本环境搭建

首先需要安装两个应用：
1.NodeJS
2.npm
在NodeJS安装完成后，npm也就会随带这有了。可以使用cmd命令查看是否安装成功：
在这里插入图片描述
NodeJS安装成功之后，接下来安装vue的脚手架工具：

npm install -g vue-cli   # 只需要第一次安装时执行
vue init webpack '项目名称'  # 使用webpack模板创建一个vue项目
cd '项目名称' #进入到项目目录中
npm install  # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev # 启动项目

vue-cli安装完成后，创建第一个vue项目：
在这里插入图片描述
因为在创建项目时，没有选择npm install，所以需要手动去执行一下命令（如果选择Yes，这里的操作可以跳过）：

执行完成后，刚创建的项目中就会自动生成一个node_modules文件夹，这个文件夹中包含了项目运行所需的依赖：
在这里插入图片描述

二、Vue-cli脚手架项目结构

这里使用了webStorm打开了vue-cli项目，项目结构图如下：
build 文件夹，用来存放项目构建脚本
config 中存放项目的一些基本配置信息，最常用的就是端口转发
node_modules这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件
src这个目录下存放项目的源码，即开发者写的代码放在这里
static 用来存放静态资源
index.html则是项目的首页，入口页，也是整个项目唯一的HTML页面
package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖
src下的目录：
- assets 目录用来存放资产文件
- components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。
- 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。
- router 目录中，存放了路由的js文件
- App.vue 是一个Vue组件，也是项目的第一个Vue组件
- main.js相当于Java中的main方法，是整个项目的入口js