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

2018年2月24日19:45:16 发表评论 123

前一天我写了一篇从零开始配置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端口被占用了,这样的话就需要修改下配置,项目配置文件在configindex.js下:

使用vue-cli快速搭建vue项目
注:如果你没有将输出文件路径修改为./,那么你使用本地浏览器打开生成的静态文件是没有用的,不过上传到服务器上是可以运行了。

3、打包上线vue项目

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

运行这行命令,将会在项目根目录下生成一个dist文件夹,你这个文件夹里面的内容全部上传到服务器上就可以直接运行了。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: