vue-router路由
使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。
使用npm安装
npm install vue-router --save
需求：如下页面，点击登录或注册链接，动态加载对应组件，实现组件切换
创建登录组件Login.vue
export default { name: "Login" };登录
用户名:
密码:
创建注册组件Reg.vue
export default { name: "reg" };注册
用户名:
密码:
确认密码:
创建主页组件Home.vue
登录注册
在router/index.js中配置路由信息
axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js 中，具有以下特征：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
安装
npm install axios # npm install vue-axios --save # npm install qs.js --save // 作用是能把json格式的直接转成data所需的格式
全局注册
在main.js页面引用
import axios from "axios" Vue.prototype.$axios = axios // 全局注册，使用方法为:this.$axios # import qs from 'qs' # Vue.prototype.qs = qs // 全局注册，使用方法为:this.qs
hello world
export default { name: "demo1", data() { return { emps: [] }; }, methods: { getEmp() { this.$axios .get(" https://www.easymock.com/mock/5cb1dfa1e1383c29e74b5fbe/emp") .then(response => { this.emps = response.data.data; }); } } };
员工编号 姓名 性别 工资 生日 {{emp.id}} {{emp.name}} {{emp.sex}} {{emp.sal}} {{emp.birthday}}
项目打包部署
打包
- 修改
/config/index.js中的assetsPublicPath（有两处），从/修改为./ - 执行命令
npm run build
tomcat部署
- dist目录下的文件拷贝到Tomcat服务器下
- 启动tomcat
nginx部署
- 将dist目录下的文件拷贝到nginx根目录的html文件夹下
- 修改nginx的conf目录下文件nginx.conf，编辑server节点
server {
listen 8081; # 监听端口
server_name localhost; # 监听域名
location / {
root html; # 根目录
index index.html index.htm; # 首页
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
