前言：
本项目将会以商城为标本，通过vue实现单页面程序。如果是刚涉及前端开发的，涉及内容会比较多，如ES6、sass、webpack等，足够搞晕你并让你放弃；所以本文章主要是让你如何快速利用vue开发，涉及配置或原理性的东西不会涉及太多，有兴趣的同学课后再慢慢去消化。
如果你是vue高手，想要得到提升，本文并不会有太多帮助，请快速跳过！
“动起来，才能更好的继续！”
一：前期准备
// 安装node.js
https://nodejs.org
我们主要是使用包管理器npm来对代码进行模块化管理，这样你就可以直接调用别人的包以及更新；有点类似IOS里的cocoapods,java的maven。
查看是否安装：打开终端输入node -v及npm -v
image.png
由于qiang的原因，npm包下载很慢，我们可以改成淘宝的源。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org以后就可以用cnpm来替代npm执行各种指令，各种指令后续会介绍。
二：webpack介绍
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
常用的功能包括sass预编译、热替换、打包、压缩、测试发布环境等等。内容较多，这里就不做太多介绍，后续用vue脚手架可自动完成，有兴趣可以到官网了解了解。https://doc.webpack-china.org/concepts/
// 全局安装
npm install -g webpack
三：vue脚手架
vue-cli是vue提供构建单页应用的脚手架，它能够帮助开发者快速的创建vue项目。当然你也可以自己搭，麻烦点在于webpack的配置上(当然webpack不是必须，只是会提高我们开发效率）。
// 安装
npm install -g vue-cli 当然也可以使用cnpm install -g vue-cli
image.png
// 创建项目
vue init webpack Demo根据提示一步步完成即可
// cd进入文件夹目录
cd Demo
// npm 初始化
npm install
// 启动(执行指令需要通过run，dev是在package.json中scripts里定义的，用来搭建一个localHost:8080，可通过浏览器访问）
npm run dev
效果如下：
vue-cli生成的
四：安装Vue Devtools
Vue Devtools用于调试过程中，跟踪查看各种数据。
来自：https://github.com/vuejs/vue-devtools
chrome安装 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
没办法科学上网的：参考https://github.com/vuejs/vue-devtools
五：项目结构
我们只需要修改src文件夹及static。
src：工程目录
- api放置向服务器请求的接口
- assets就放置自己写的及组件的资源。
- components就是自定义vue组件，如header.vue，footer.vue等
- pages就是每个页面内容
- router是路有选择器，主要是用来指导跳转，如http://localhost:8080/home显示主页面http://localhost:8080/login显示登录页等
- store是Vuex的文件，这部分就是vue数据交互的核心，详细参考： https://vuex.vuejs.org/zh-cn/
- App.vue是页面入口，通过核心语句<router-view/>配置路由入口进行跳转。
- main.js用来创建全局Vue对象
static一般放置的是非组件的、第三方的js、css等资源。
其它文件咱们先不管～
vue-mall项目结构
调试相关
这个写在这里是因为我发现用Vue Devtools并不能很好的debug，特别是涉及数据流跟踪操作显得苍白无力。折腾了很久发现webpack的强大之处。
ctrl(command) + p然后输入要打断点的文件，愉快的断点吧....
QQ20171129-092902-HD (1).gif
总结：
至此，我们已经能够通过vue-cli搭建项目，了解了相关调试技巧，并让项目跑起来。此章节任务完成，下一章节我将介绍如何一步步修改文件，最终达到我们要的效果！
GIT地址： HEAD ->sectionOne
git@github.com:Monk428/vue-mall.git
网友评论