1.前期准备工作

Hello，大家好，接下来我会以这个项目为基础更新一系列的文章，但是每天只更新一点、也只学一点，目的希望大家利用工作学习之余的碎片时间通过这个项目来学习vue和node等知识点；希望大家都一起参与进来，动手实践，有什么问题都可以在群里（或加群或私信我）一起讨论学习；文章中有什么错误也欢迎大家留言指出，共同学习，一起进步，早日走上人生巅峰。

一、git仓库

1、首先我先创建一个仓库，大家fork这个仓库（https://github.com/Ewall1106/mall），以此仓库为核心，我会把每天新完成的代码提交上去更新，一直到大家一起把这个项目做完；大家fork完以后可以同步我的仓库查看或者在我的仓库上直接做修改，有问题也可以提issue。

2、大家在github上建一个自己的项目，自己动手亲自写一遍，有问题可以查看fork的核心仓库，也可以在群里一起讨论解决问题。

好了，废话不多说了，今天的内容很简单，就是把前期的准备工作做好，环境搭好，为我们后面的项目做准备。

二、安装node环境

去官网上根据自己的电脑环境下载对应的版本（https://nodejs.org/en/）；然后傻瓜式的点下一步完成完成即可，然后打开命令行输入：

如果显示版本号了就证明你安装成功了。具体你可以移步我的简书关于node安装的详细步骤(https://www.jianshu.com/p/d3eccfa30da1）

三、用脚手架搭建一个基于webpack的vue项目

1、命令输入
安装的步骤呢官网（https://cn.vuejs.org/v2/guide/installation.html）已经写得十分详细了，我就照搬过来了：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

2、含义
安装过程中出现的命令行是什么意思呢？我简单解释下，从上到下依次的含义为：

• 项目的名字是什么？ 我们这里选默认的myproject
• 项目的描述？ 默认
• 项目的作者？
• 是否使用路由v-router？ 我们选yes
• 是否使用ESLint语法校检？ 我们选n
     （ ps：ESLint语法校检工具可以帮你养成良好的编码习惯、规范的格式，但是每个人习惯不同，会很繁琐，所以前期我们选择不安装。）
• 后面“unit tests”、“e2e tests”都是单元测试，这里我们不安装。

3、安装完成，我们进入项目启动编译
 新的vue-cli脚手架构建一个新的项目的时候，连依赖都一起帮你安装好了，也就是不用进入项目后使用npm install安装依赖了，帮我们省略了一个npm install的步[图片上传中...(Image.png-6f2ff7-1526894543744-0)]
骤。
（1）好，现在我们进入项目，npm run启动编译：

（2）现在我们进入浏览器中输入http:localhost:8080就可以看到一个初始化的vue项目

四、其它

因为某些不为人知的原因，如果你老是用npm安装失败，可能你先需要先安装一个镜像cnpm（https://www.jianshu.com/p/d7d0bac65877）

【原创首发于慕课网】