Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用,该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
准备条件

node.js客户端下载 下载地址：https://nodejs.org/zh-cn/ 下载安装即可。

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

主要文件目录如下：--build --config --node_modules --src(主要目录) |--assets |--components(一般作为页面防止目录) |--router(如果按照router模块的话) |--index.js |--APP.vue |--main.js --index.html

在router/index.js中参照helloWord增加一个Home路由。import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Home from '@/components/Home'// 增加的Vue.use(Router)export default new Router({ mode:'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld },// 增加的home与上面import对应 { path: '/home',// 访问路径 localhost:8080/home name: 'Home',// 别名 component: Home// 与import取的名字对应 },// 匹配任何没有定义的路由，将其定义到根目录下面 {path:'*',redirect:'/'} ] })

上面增加了一个路由，则需要在components目录下增加一个Home.vue 的页面 这就完成了一个vue页面的搭建，我们在浏览器中输入： localhost:8080/home 就能访问components目录下面Home.vue 目录