避坑指北：vue使用history路由
背景 在部署vue项目时，路由模式默认使用哈希(hash)模式，但是由于某些原因，要求使用history模式。但是对于现在的部署环境则遇到了一个问题。首先是目录： site ---- 项目根目录 ├── siteA ---- 项目A │ └── index.html └── siteB ---- 项目B └── index.html 即项目放在了同一个根目录下，那么此时我们就需要调整vue的一些配置。具体如下 Vue项目配置 路由设置 export default [{ path: '/siteA', name: 'siteARoot', component: () => import('@/views/siteA/index'), children: [ { path: 'index', name: 'Index', meta: { title: 'siteA' ...
VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： <!DOCTYPE html> <html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ el: '#page', data: { msg: 'Hello Vue!123' } }) &l ...
一、VUE中的遗漏的知识
render中的h函数 h函数可以创建虚拟dom，通过创建的虚拟dom再转化为真的的DOM，从而渲染到页面中。 <script> // render function // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上 const app = Vue.createApp({ template: ` <my-title :level="2"> hello xiaokang </my-title> ` }) app.component('my-title', { props: ['level'], render() { const { h } = Vue return h('h' + this.level, {}, [ this.$slots.default(), h('h4', {}, 'xiao ...
7、VUEX
VUEX是什么 vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 vuex的核心概念 state提供唯的公共数据源，所有共享的数据都要统一放到 Store的 State中进行存储。 export default new Vuex.Store({ // 共享数据 state: { count: 0 }, mutations: {}, actions: {}, modules: {} }) 使用方式 通过this.$store.state访问属性 <h3>当前最新的Count值为：{{ $store.state.count }}</h3> 在template模板中可以省略this 导入模式 通过计算属性 import { mapState } from 'vuex' export default { data () ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 import NProgress from 'nprogress' import 'nprogress/nprogress.css' 为请求添加进度条效果 // request拦截器(展示进度条) axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config }) // 相应拦截器 （隐藏进度条） axios.interceptors.response.use(config => { NProgress.done() return con ...
6、订单管理功能及分析视图
项目仓库：https://github.com/changeclass/vue-shop 时间线 <el-timeline> <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time" > {{ activity.context }} </el-timeline-item> </el-timeline> ECharts基本使用 安装ECharts的依赖包 在组件中导入 参照文档使用 <template> <div> <!-- 面包屑导航 --> <el-breadcrumb separator=" ...
5、商品列表功能开发
项目仓库：https://github.com/changeclass/vue-shop UI实现 时间格式化问题：可以设置一个全局的过滤器，对时间进行过滤 // 定义全局过滤器 Vue.filter('dataFormat', function(originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + 1 + '').padStart(2, '0') const hh = (dt.getHours() + 1 + '').padStart(2, '0') const mm = (dt.getMinutes() + 1 + '').padStart(2, '0') const ss = (dt.getSeconds() + 1 + '').padStart(2, '0') ...
4、分类管理功能开发
项目仓库：https://github.com/changeclass/vue-shop UI 树形表格插件 插件地址：https://github.com/MisterTaki/vue-table-with-tree-gird 安装依赖 在入口文件导入插件并注册 import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable) 使用 <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border ></tree-table> 使用具名插槽 在此插件中使用模板渲染第二 ...
3、权限管理功能开发
项目仓库：https://github.com/changeclass/vue-shop 创建子分支并推送 git checkout -b rights git push -u origin rights 权限管理标签 根据不同等级分配不同颜色的标签。 <el-table :data="rightsList" border stripe> <el-table-column type="index"></el-table-column> <el-table-column label="权限名称" prop="authName"></el-table-column> <el-table-column label="路径" prop="path"></el-table-column> <el-table-column label="权限等级" prop="level"> <template v-slot="scoped"> <el-tag v-if="sco ...
