从零开始搭建vue全家桶（一） 使用 vue-cli 构建项目

Vue 全家桶介绍

主要包含了vue-router、vuex， axios 、vue-cli、sass、elementUI组成了一个完整的vue项目的核心构成。

概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具、5.UI框架。

下面单独介绍

一、安装node.js

进入node.js官网 https://nodejs.org/en/download/, 选择安装包进行下载安装。
安装完成后，打开命令窗口（window系统键盘按【Win+R】键，输入cmd回车打开命令窗口），输入node -v 和 npm -v 可以分别查看对应的版本号，如图所示：显示对应版本号表示下载安装成功。

二、安装vue-cli脚手架

全局安装vue-cli:

npm install --global vue-cli

检查是否安装成功

vue -V

三、使用Vue-cli脚手架快速构建单页应用

1. 本地创建一个基于webpack模板的新项目；

//创建一个基于 webpack 模板的新项目
vue init webpack my-project

2. 进入项目目录

//进入项目目录
cd my-project

3. 安装项目依赖

//安装项目依赖
npm install

4. 安装项目依赖

//启动运行项目
npm run dev

5. 打包发布
   打包完成后，会生成 dist 目录，项目上线时，把dist 目录下的文件放到服务器就可以了。

//打包发布
npm run build