一个Java措施猿眼中的前后端疏散以及Vue.js入门

必要特殊表明的是，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比拟

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!