1.安装node.js和npm环境

点击Node.js下载进入上图网站进行下载，

随后跟着顺序进行安装就好。

2.配置node.js环境

这一步一定要做，不然后面安装Vue脚手架的时候就会出现错误（不要问我怎么知道的）

打开环境变量文件

open -e .bash_profile

打开之后添加一行以下代码，（Mac的node，npm可执行文件都在/usr/local/bin/目录下）

PATH=$PATH:/usr/local/bin/

如上图所示。

检测一下是否安装成功。

这里显示已经安装成功了，接下来开始安装Vue

3.全局安装 vue-cli

在终端输入 npm install --global vue-cli

安装完vue-cli之后要先安装webpack才能进行打包

4.安装webpack

在终端输入 sudo -s

npm install webpack -g

5.创建项目文件

接着去到你想创建文件的位置，我这里是直接在桌面创建的，如果你不知道如何获得桌面的路径

就打开Finder在左边栏找到桌面，下面会有个路径栏，直接将桌面拖到终端里就可以获得桌面路径啦

在路径前面加上cd 进入桌面文件夹

cd /Users/huwenlu/Desktop 

接着创建你的项目文件夹

vue init webpack todolist

上面的todolist为你自己想设置的文件名

出现Installing project dependencies。。。就创建成功啦，桌面上就会出现一个todolist的文件夹，这里的文件名你可以在创建的时候进行设置，上图蓝色字体都是自己设置的。

终端输入cd todolist

npm run dev

创建成功后会给一个链家 http://localgost:8081

根据实际所给的地址，在浏览器打开。

 

6.查看项目结构

•  main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件
• App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
• index.html文件入口
• src放置组件和入口文件
• node_modules为依赖的模块
• config中配置了路径端口值等
• build中配置了
• webpack的基本配置、开发环境配置、生产环境配置等