vue开发系列(一)：项目搭建

前言：

本项目将会以商城为标本，通过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