通过vue-cli构建项目

vue-cli是快速构建单页面应用的官方脚手架，如果你是初次学习vue，可以先看官方文档，通过script标签引入，因为vue-cli里面包含了很多东西，如webpack，nodejs，npm等，容易学习混乱。

1. 下载node.js

首先需要有node环境，通过node.js官方网站下载安装包进行安装
安装完毕后，在命令行中输入npm -v，如果返回版本号，说明安装成功

2. 安装git

下载安装
git config --gobal user.name 你的用户名
git config --gobal user.email 你的邮箱
这两个配置用在创建新项目的作者名称

3. 安装vue-cli

命令行输入npm install -g vue-cli全局安装vue-cli

4. 创建项目

使用 vue init <template-name> <project-name> 命令创建
<template-name>为构建环境的模板，project-name是项目名称
官方给我们提供了几个模板
webpack ， webpack-simple，browserify ，browserify-simple， pwa ， simple

创建一个项目，vue init webpack-simple vue-project
项目基本信息配置，回车使用默认值

image.png
安装成功后发现目录中有这些文件
image.png

使用cd vue-project切换到文件夹，使用npm install依赖模块，会发现目录下多了这个文件夹

image.png
使用npm run dev运行项目，这时候就会打开一个本地的服务器的网页，http://localhost:8080/，页面如下所示
image.png

5. 打包上线

自己的项目文件都放在src文件夹下面，项目开发完成之后，使用npm run build进行打包工作，会生成dist文件夹
项目上线时，dist文件夹和index.html放到服务器上就行了