1.vue

我们之前的vue和我们的java代码是不是都在一个工程下。没有做到前后端完成分离。企业中前端也会由自己的服务器，也有自己的开发工具。

前端服务器Nodejs 开发工具VsCode[我们为了和idea匹配使用WebStorm].

2.安装Nodejs服务器。

验证是否安装完成:

cmd--黑窗口输入 --version

2.1 安装npm

因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。

我们无需安装因为在nodejs中默认带了该软件

2.2 安装vue的脚手架

脚手架的作用:就是用来帮你创建前端vue工程。

安装的命令: npm install -g @vue/cli

速度很慢

3. 使用脚手架创建Vue工程

(1)在cmd窗口中输入

vue ui

（2）创建

（2）安装需要的插件

（3）安装axios发送异步请求的依赖

4. webstorm打开vue工程

关联:npm命令

整个项目中node_modules占用项目的空间99%。后端拿到的项目一定没有node_modules。需要自己在本地安装。

npm install  -- 安装项目需要的模块

5. main.js

一个组件引用另一个组件步骤:

（1）新建组件，并且在当前组件中导入另一个组件

import hello from './components/Hello.vue'

（2）注册另一个组件

export default {name: 'app',//(2)注册组件components: {hello}
}

（3）使用注册的组件

<!--(3)使用组件-->
<hello></hello>

6. 路由

实现前后端分离-vue相关推荐

学生选课系统前后端分离 vue springboot
学生选课系统前后端分离 vue springboot 系统描述一.系统功能二.系统截图 1.网络爬虫新闻获取代码 2.pom 源码系统描述基于spring boot vue的学生选课系统 ...
前后端分离:vue项目部署服务器操作步骤详细
部署前端项目vue到服务器首对应的是找到项目进入对应的目录下进行 npm run build 会生成一个dist文件将整个dist文件上传到服务器就可以了然后就是首先就是安装node.js ...
从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由+同构...
上期回顾说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
从壹开始前后端分离 [ vue + .netcore 补程 ] 三十一║ Nuxt终篇：基于Vuex的权限验证探究...
缘起哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登陆进行研究,这一块咱们之前在说第一个项目的时候 ...
ruoyi前后端分离vue打包部署发布
说明:打包使用的方式是把vue打包成dist文件后,放到若依的"ruoyi_admin"的静态文件模块下面,访问"http://localhost:9070/(端口&qu ...
若依前后端分离vue 中项目上线后图片预览无法显示问题
这里看到图片返回的url地址里面图片前缀名多了个 /prod - api 导致图片无法预览找到components 里面的imagetwo 里面的index.vue这里只需要在url上传图片组件 ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...
JQuery前后端分离
目录 jQuery时代 HTML CSS JavaScript JQuery bootstrap easyui 前后端分离 vue ElementUI jQuery时代 HTML HTML:网页结构 ...
记录一种ssh旧系统和前后端分离新系统结合的解决方案，以及两系统间通过token进行认证的方式
一.背景介绍公司现有一个ssh框架的旧系统,想要转型使用前后端分离vue+springboot的新框架.由于一些原因,无法完全转型,所以考虑新增的业务需求,使用在旧系统中嵌套新系统页面的方式,之后新 ...

实现前后端分离-vue