一个Java程序猿眼中的前后端分离以及Vue.js入门(3)

需要额外解释的是，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: '/', 
 name: 'HelloWorld', 
 component: HelloWorld 
 } 
 ] 
}) 

1. 这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，
2. 创建一个Router对象，并定义路由表
3. 这里定义的路由表，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 项目进行编译打包发布。

【编辑推荐】

1. 推荐！数据可视化的十种优秀JavaScript图表库
2. 坑爹！花2亿耗2年，网站没建完Java写不好，咨询公司埃森哲被告了
3. Python、Java、C#、Perl 创始人聚首畅谈编程语言的未来
4. 5G到来，App的未来，是JavaScript，Flutter还是Native ？
5. 2019最新Java Web J2EE下的两大框架SSH和SSM对比

（编辑：ASP站长网）