机电建设工程施工网站,百度关键词点击价格查询,工信部网站备案注销,厦门公司注册代理根据前文《使用Vue脚手架工具搭建vue项目》搭建好脚手架后使用 1.vue-router 2.引入UI框架ant design vue 3.引入less
1.vue-router
vue-router分为两种模式(默认为hash模式)#xff1a; hash history hash#xff1a; 特征#xff1a; 1.hash会在浏览器路径里带#号#…根据前文《使用Vue脚手架工具搭建vue项目》搭建好脚手架后使用 1.vue-router 2.引入UI框架ant design vue 3.引入less
1.vue-router
vue-router分为两种模式(默认为hash模式) hash history hash 特征 1.hash会在浏览器路径里带#号比如http://locahost:8080/#/index 2.hash在浏览器改变路径触发页面跳转即前进后退但不会重新加载页面。 3.hash传参是基于url如果要传递复杂的参数会有体积的限制
在router文件夹下index.js文件配置如下
import Vue from vue;
import VueRouter from vue-router;
import Router from vue-router;
import { asyncRouterMap } from /config/router.config;//存放页面路由配置的js文件路径Vue.use(Router);const router new VueRouter({mode: hash,routes: asyncRouterMap
});export default router;history 特征 1.可以在url放参数而且也可以将数据存放在一个特定的对象中其利用HTML5 History inteface中新增的pushState()和replaceState()方法限制history只支持IE8以上
2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理将返回 404 错误。
在router文件夹下index.js文件配置如下
const router new VueRouter({mode: history,base: process.env.VUE_APP_PATH, //需要配置base就是在最外层根目录下新建.env的文件文件里内容为(VUE_APP_PATH/)routes: asyncRouterMap
});这两个方法应用于浏览器的历史记录栈在当前已有的 back、forward、go 的基础之上它们提供了对历史记录进行修改的功能。只是当它们执行修改时虽然改变了当前的 URL但浏览器不会立即向后端发送请求。
因此可以说hash 模式和 history 模式都属于浏览器自身的特性Vue-Router 只是利用了这两个特性通过调用浏览器提供的接口来实现前端路由。
router.config.js文件配置如下
//创建并渲染一个DOM元素节点
const RouteView {name: RouteView,render: h h(router-view)
};
//页面路由
export const asyncRouterMap [{path: /, //根路径name: index,meta: { title: 首页 },//路由元信息也就是每个路由身上携带的信息component: RouteView,redirect: /helloWorld, //路由重定向children: [{path: /helloWorld,name: helloWorld,component: () import(/page/helloWorld/index),//路径meta: {title: 首页,current: /helloWorld}},{path: /music,name: music,component: () import(/page/music/index),meta: {title: 音乐,current: /music}}]}
];
mian.js文件配置如下
import router from ./router;
Vue.prototype.router router;new Vue({el: #app,router,components: { App },template: App/
});
注意点 package.json文件里我的vue-router版本是3.0.1
2.引入ant-design-vue UI框架
在终端输入命令
//带是指定版本号
yarn add ant-design-vue1.7.8 然后在mian.js文件里
//1.全局引入的方式
import Antd from ant-design-vue;
import ant-design-vue/dist/antd.css;
Vue.use(Antd);//2.按需引入
import {Button, message} from ant-design-vue;
import ant-design-vue/dist/antd.css;
Vue.use(Button, message);注意点
ant-design-vue 版本1.7.8的官方文档
3.引入less
1.在终端输入命令
//默认情况下安装less-loader不指定版本号会导致版本过高跟less不匹配会出问题
yarn add less3.13.1 --save
yarn add less-loader5.0.0. --save2.在build\webpack.base.conf.js文件里插入如下代码 {test: /\.less$/,loader: style-loader!css-loader!less-loader}3.检查build\utils.js文件 如果是如下则没问题 4.使用 在vue页面文件里
style langless scoped
/style注意点 1.默认情况下安装less-loader不指定版本号会导致版本过高跟less不匹配会出问题, 我这里的less是3.13.1 less-loaders是5.0.0
