前言
从 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 保存了我们刚才安装的选项和依赖。
最后
如果有什么想跟我讨论的话,请私信。