需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: 'https://www.jb51.net/', name: 'HelloWorld', component: HelloWorld } ] })
这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，
创建一个Router对象，并定义路由表
这里定义的路由表，path为 / ，对应的组件为 HelloWorld，即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件
WebStorm 中启动Vue
也可以直接在 webstorm 中配置vue并启动，点击右上角进行配置：
然后配置一下脚本 ：
配置完成后，点击右上角启动按钮，就可以启动一个 Vue 项目，如下：
项目编译
这么大一个前端项目，肯定没法直接发布运行，当开发者完成项目开发后，将 cmd 命令行定位到当前项目目录，然后执行如下命令对项目进行打包：
npm run build
打包成功后，当前项目目录下会生成一个 dist 文件夹，这个文件夹中有两个文件，分别是 index.html 和 static ，index.html 页面就是我们 SPA 项目中唯一的 HTML 页面了，static 中则保存了编译后的 js、css等文件，项目发布时，可以使用 nginx 独立部署 dist 中的静态文件，也可以将静态文件拷贝到 Spring Boot 项目的 static 目录下，然后对 Spring Boot 项目进行编译打包发布。
总结
因为松哥的读者以后端程序猿居多，也有少量前端程序猿，因此本文松哥想从一个后端程序猿的角度来带大家理解一下前后端分离以及 Vue 的一些基本用法，也欢迎专业的前端工程师出来拍砖。
以上所述是小编给大家介绍的前后端分离及Vue.js入门详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: