构建vue项目第一步之vue-cli

最近在自学vue,官方文档基本基本敲了一遍,入门demo也写过,于是就想搞个项目玩玩,遂上github上下了几个项目打算看一下,发现他们有个明显的特点,里面的目录结构基本一样(都有src,都需要npm下载依赖,生成dist)

图片来源于网络

![Uploading 屏幕快照 2017-03-06 上午11.25.51_831470.png . . .]]( http://upload-images.jianshu.io/upload_images/1808957-6e1326a80cfd024d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

于是打开最上边的build目录把里面的文件看了一下

部分截图

感觉压力陡增,这尼玛什么鬼,这东西怎么写??(其实是webpack配置项)

一脸懵逼

遂上网查资料看文档,发现有个叫vue-cli的东西,官方解释是

A simple CLI for scaffolding Vue.js projects.

一个简单的vue项目脚手架(通俗的讲就是一个项目的空壳,^o我这么理解),那么我们就来用一下吧

说干就干

看文档

屏幕快照 2017-03-06 上午11.01.24.png

需求:node版本4以上,npm版本3以上,并有git

下面运行终端运行命令

npm isntall -g vue-cli

好了以后运行

vue init webpack my-project(你自己的项目名)

然后根据提示yes/no,enter选择自己需要的文件,最后效果如下

效果图

这些配置文件,服务文件都不用自己写,目录结构也基本通用,构建自动升成,后续写项目需要安装什么模块都在package.json里添加即可

然后我们安装依赖运行一下看看效果

npm isntall
npm run dev

页面效果

这就是一个vue-cli的空壳子,后续写项目在相关文件夹添加相关代码即可,以上就是搭一个vue-cli壳子的大概过程,希望对刚入坑同学有点帮助,不足之处欢迎指导.