最近在自学vue,官方文档基本基本敲了一遍,入门demo也写过,于是就想搞个项目玩玩,遂上github上下了几个项目打算看一下,发现他们有个明显的特点,里面的目录结构基本一样(都有src,都需要npm下载依赖,生成dist)
图片来源于网络
![Uploading 屏幕快照 2017-03-06 上午11.25.51_831470.png . . .]](https://img.haomeiwen.com/i1808957/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壳子的大概过程,希望对刚入坑同学有点帮助,不足之处欢迎指导.
网友评论