Sublime Text
打开命令提示行，进入项目目录“D:\phpStudy\WWW\study\Vue”，然后执行命令“vue init webpack service_view”,执行效果如下图（每一项的数据输入可根据实际情况进行调整）：
生成工程包成功后，执行命令“cd service_view”切换目录后，再执行命令“npm run dev”启动项目，执行效果如下图1： Tips：执行命令“npm run dev”之前，该项目需要安装以下组件包： 1.执行下图2的三个命令，element-ui用于vue的UI框架 ，axios是一个基于promise的HTTP 库； 2.安装样式加载器npm i css-loader node-sass sass-loader vue-loader vue-style-loader style-loader less less-loader --s。
启动成功后，浏览器输入地址“http://localhost:8080/”打开页面，显示效果如下图（证明工程创建成功）：
文件index.html增加以下两点： 1.“”解决网页图标问题； 2.增加style里面的css样式，用于全局（由于使用iframe需要使用这些样式，可根据实际项目情况调整）。
文件main.js代码如下图（分析重点代码）： 1.引入组件“element-ui”，这里是全部引入，可根据实际情况引入相应的组件，有利于提高速度；利用该组件的Message新建全局提示信息框方法hint； 2.利用router.beforeEach修改跳转到页面的title，方便查看title就知道当前属于那个页面（后面注意添加next()）。
文件App.vue代码如下图（比较简单，可自行查看代码）：
文件main.js代码如下图（分析重点代码）： 1.新增懒加载引入组件的方法_import_，比直接引入组件的好处是当你访问到这个页面的时候才会去加载相关组件，这样的话能提高页面的访问速度； 2.每个路由下面的“meta--title”用于显示页面title的信息； 3.为了是使URL像正常的URL，需要配置路由模式“mode: 'history'”，去掉URL中的#。