使用vue-cli快速搭建vue项目

前一天我写了一篇从零开始配置vue+webpack项目,对于新手来说，太过于复杂，今天我们就介绍下使用vue-cli快速搭建一个vue项目。

其实类似于vue项目如何在本地和服务端运行这篇文章所介绍的，必须得有node.js环境（如果你没有安装，可以点击查看这段的文章链接），然后安装脚手架vue-cli，接着就可以在本地运行了，下面就详细说下vue-cli。

1、安装vue-cli

必须安装好node，然后再全局安装下vue-cli：
npm install -g vue-cli

也可以使用国内镜像cnpm来安装，同样看上面给出的文章链接。

检测vue是否安装成功命令：
vue -V

如果有版本提示，即安装成功。

2、生成Vue项目

我们先创建一个vue项目目录，输入：
vue init webpack Vue-Project

webpack是模板名称，Vue-Project是自定义的项目名称，执行上面的命令可以生成一个Vue-Project的项目文件夹。

进入Vue项目目录：
cd Vue-Project

安装相关依赖：
npm install

然后让项目跑起来：
npm run dev

如果浏览器打不开http://localhost:8080 ，有可能是本地8080端口被占用了，这样的话就需要修改下配置，项目配置文件在config》index.js下：

// 找到port: 8080修改端口
port:8050
// 在build下找到生成文件路径修改为
assetsPublicPath: './',

注：如果你没有将输出文件路径修改为./，那么你使用本地浏览器打开生成的静态文件是没有用的，不过上传到服务器上是可以运行了。

3、打包上线vue项目

一个vue项目最终还是要打包上线的，我们只需要使用一行命令就可以将vue项目全部打包成静态的html文件，那就是：
npm run build

运行这行命令，将会在项目根目录下生成一个dist文件夹，你这个文件夹里面的内容全部上传到服务器上就可以直接运行了。
个人博客原文地址：http://www.zcbboke.com/1613.html