从 0 开始，vue 项目实战（一）

前言

从 0 开始开发一个 vue 的 SPA 项目。
如果你还没有学习过 vue，请先按照 官网 或者 社区 的教程做一遍。
像这样，做几个例子，不然的话看这篇文章的意义不大。

这篇文章比较适合已经跟着官网的例子做了一遍的朋友们看。

技术栈

vue2 + vuex + vue-router + mint-ui + zepto + es6 + less
另外参考了小伙伴提供 vue项目例子，大家也可以去看一下。

环境搭建

如果你已经跟着教程做一遍了，那么接下来可以来做项目了

以前我只会写点jquery ，会一点切图，对 vue 并没有怎么了解。
虽然说 jquery 已经很方便开发了，操作 dom 非常的方便，然而 vue 不用操作 dom 让我觉得原来可以这么简单。
大家是不是还经历过这样的项目结构呢？

一直以来我觉得这样子就可以了，想要什么就去插件网上下载就好了，比如 jquery，jquery.datepicker 等等。
这完全没有什么问题，在我还只会切切图的时候我就是这样的项目结构。
然而现在需要搭建一个复杂一点的环境，这会帮助我们做一些 合并压缩，热更新，自动化等等一些麻烦事，方便我们的开发。
我们不再推荐下载 vue.js 到 js 文件夹，然后 html 里面引入使用。
然而写这些配置是相当麻烦的一件事，这里 vue-cli 帮助我们很好的解决了这个问题。
它能自动帮助我们生成一些配置和基础项目。
它生成的项目结构是这样子的。
(～￣▽￣)～

不得不说真是方便呢，如果对前端工程化一点基础的没有，是不是瞬间懵逼呢？ (｡･∀･)ﾉﾞ
是的，刚开始我也觉得这个很奇怪，为什么要弄的这么复杂，难道以前那样子不好吗？<(￣ˇ￣)/
我以前的话基本上是写个模板，然后扔给后端，让后端去使用这个模板，现在前后端分离了，自然而然前端就需要一个项目，当然不能像之前那么简单啦，以前那样的目录只是方便后端使用而已。(○´･д･)ﾉ
压缩编译这些东西都得前端来解决，不能再像之前那样子了。

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

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

2、下载 node
然后下载一个node。

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

4、使用淘宝镜像资源 cnpm
输入下面这个东西，安装淘宝镜像。

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

这个比 npm 好用。

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

如果安装失败请尝试清一下缓存再安装！

npm cache clean

5、安装 webpack vue-cli

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

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

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

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

7、启动项目
然后按照提示安装一下以来，我们就可以看到页面了。

cd menu
cnpm install && cnpm run dev

恭喜恭喜，我们已经成功的搭建了一个项目了，接下来我们需要一款编辑器，如果你使用其他编辑器也是可以的。

8、下载编辑器 vscode

再装一下 vscode 里面的一些插件

安装了记得开启 主题 和 文件图标主题。

项目结构

到这里我们就搭建好了需要的开发环境，接下我们就可以开始开发了。

package.json 保存了我们刚才安装的选项和依赖。 

最后

如果有什么想跟我讨论的话，请私信。