1.vue 项目实战

技术栈

vue2 + vuex + vue-router + mint-ui + zepto + es6 + less

环境搭建

若是你已经跟着教程作一遍了，那么接下来能够来作项目了

你们是否是还经历过这样的项目结构呢？

一直以来我以为这样子就能够了，想要什么就去插件网上下载就行了，好比 jquery，jquery.datepicker 等等。
然而如今须要搭建一个复杂一点的环境，这会帮助咱们作一些 合并压缩，热更新，自动化等等一些麻烦事，方便咱们的开发。
咱们再也不推荐下载 vue.js 到 js 文件夹，而后 html 里面引入使用。
然而写这些配置是至关麻烦的一件事，这里 vue-cli 帮助咱们很好的解决了这个问题。
它能自动帮助咱们生成一些配置和基础项目。
它生成的项目结构是这样子的。

不得不说真是方便呢，若是对前端工程化一点基础的没有，是否是瞬间懵逼呢？ 
是的，刚开始我也以为这个很奇怪，为何要弄的这么复杂，难道之前那样子很差吗?
我之前的话基本上是写个模板，而后扔给后端，让后端去使用这个模板，如今先后端分离了，天然而然前端就须要一个项目，固然不能像以前那么简单啦，之前那样的目录只是方便后端使用而已。
压缩编译这些东西都得前端来解决，不能再像以前那样子了。

那么，跟着下面的步骤一步步搭建好环境吧。

一、下载 Git 
首先须要下载一个命令行工具，话说我是QQ电脑管家里面直接下载的，也能够点这里下载
若是有的话就不须要了，win10 自带的命令行也是能够的。

二、下载 node
而后下载一个node。

三、使用命令行

而后新建个文件夹放你的项目，进入文件夹，右键打开命令行工具。

四、使用淘宝镜像资源 cnpm

输入下面这个东西，安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

这个比 npm 好用。

输入一下指令看是否安装完成。

若是安装失败请尝试清一下缓存再安装！

npm cache clean

五、安装 webpack vue-cli

cnpm install -g vue-cli
cnpm install -g webpack

输入一下 -v ，测试是否安装成功

六、生成项目
只要输入这三个东西以后一直 n 回车就行了，至于下面那堆是什么暂时就无论了。(⊙v⊙)
第一遍若是等待时间太长 直接 ctrl + c 跳出就行了。

到这里项目已经生成完毕了，你能够在目录下面看到你生成的项目了。

七、启动项目
而后按照提示安装一下以来，咱们就能够看到页面了。

cd menu
cnpm install && cnpm run dev

恭喜恭喜，咱们已经成功的搭建了一个项目了，接下来咱们须要一款编辑器，若是你使用其余编辑器也是能够的。