vue2.0：（一）、vue的安装和项目搭建（以外卖app项目举例）
vue系列踩坑大作战由此就要开始了，准备好了吗，和我一起踩坑，学会vue吧。同时，也欢迎大家把自己遇到的坑发出来，让更多的人学会vue，因为我深知前端学习新框架不容易，尤其是我这种半路出家的女前端。不废话了，开始吧：
摘要：本篇文章介绍了vue环境配置，项目的搭建等。（如果有人node安装配置环境变量配不好，过几天我会再写一篇node安装和less在项目中的应用给大家看。）
我们接下来一个一个搭建安装：
一、基本环境安装：
- 安装node：从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。测试：win+R(打开命令行)-------输入cmd-------敲入node -v。如果出现相应版本号，即安装成功，我的如下图：
2. 测试npm版本，不能低于3：命令行-------npm -v:
3.安装淘宝镜像：
在命令行里输入如下代码：npm install -g cnpm --registry=https://registry.npm.taobao.org
测试淘宝镜像是否安装成功：命令行-------cnpm -v
4.安装vue：
npm install vue
测试(注意，这里最后一个是大V哦)：vue -V
5.安装vue-cli脚手架：
npm install vue-cli -g
6.安装webpack：
npm install webpack -g
7.安装less(现在的项目都用less或者sass啦，别犯懒，安装吧~~)
npm install -g less
好的，基本上我们需要的环境都安装了，接下来，要搭建项目啦~
二、项目搭建：
1.先建一个项目文件夹
2.在该文件夹下执行：npm install
3.启动运行项目喽(这一步在每次启动项目前都要敲哦~)：npm run dev 向下面这样，就启动成功啦！复制HTTP到浏览器你就能看到你的Hello Vue啦~~
二、项目准备：
1、项目目录设计：
如图：黑色背景为刚下载好在编辑器中打开时的样子，第一幅白色背景的图片里面有一些需要添加的文件夹。我们所需要写的代码都在src文件夹里面。
1.common文件夹：该文件夹下应该再新建两个文件夹，一个命名为js,一个命名为css，common的里面是存放公共css和js的，有些情况下你会需要图标，所以还会有font文件夹。
2.components文件夹：这是本来就有的文件夹，是用来管理组件的。比如说头部header,内容里面的几个组件，尾部footer,这里并不是公共的组件，是你页面的结构所需要的都放在这里。以header文件夹为例，里面的header.vue是你需要敲写的代码，其他的header所需要的图片也放在这里。也就是说一个组件里除了.vue的文件之外，还可能包括图片等其他相关的资源等等。因为组件有一个很重要的设计理念就是就近维护。
3.router文件夹：负责路由的代码。
（还有其他文件夹还会陆续补充进来。。。。下一节为大家更新如何模拟数据，mock数据。）
以上是 vue2.0：（一）、vue的安装和项目搭建（以外卖app项目举例） 的全部内容， 来源链接： utcz.com/z/380033.html
