从 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 帮助咱们很好的解决了这个问题。
它能自动帮助咱们生成一些配置和基础项目。
它生成的项目结构是这样子的。
(～￣▽￣)～

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

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

一、下载 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

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

八、下载编辑器 vscode

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

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

项目结构

到这里咱们就搭建好了须要的开发环境，接下咱们就能够开始开发了。

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

最后

若是有什么想跟我讨论的话，请私信。