2、React模块与组件
模块与组件的理解 模块 向外提供特定功能的js 程序, 一般就是一个js 文件 复用js, 简化js 的编写, 提高js 运行效率 组件 用来实现特定(局部)功能效果的代码集合(html/css/js) 复用编码, 简化项目编码, 提高运行效率 组件的基本使用 创建组件有两种方式 工厂函数组件 简单组件，通过函数返回值即可。函数名就是组件(标签)名。 1234function MyComponent() { return <h2>工厂函数组件（简单组件）</h2>}ReactDOM.render(<MyComponent />, document.getElementById('test')) ES6类组件 复杂组件，通过ES6类中的render方法。 123456class MyComponent2 extends React.Component { render() { return <h2>ES6类组件（复杂组件）< ...
1、React基础用法及JSX
基本使用 123456789101112131415<body> <div id="test"></div> <!-- 核心库 --> <script src="../../js/react.development.js"></script> <!-- 提供DOM操作的扩展库 --> <script src="../../js/react-dom.development.js"></script> <!-- 解析JSX语法代码转为纯JS --> <script src="../../js/babel.min.js"></script> <script type='text/babel'> // 告诉babel.js解析里面的jsx代码 // 1. 创建虚拟DOM元素对象 v ...
7、VUEX
VUEX是什么 vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 vuex的核心概念 state提供唯的公共数据源，所有共享的数据都要统一放到 Store的 State中进行存储。 123456789export default new Vuex.Store({ // 共享数据 state: { count: 0 }, mutations: {}, actions: {}, modules: {}}) 使用方式 通过this.$store.state访问属性 1<h3>当前最新的Count值为：{{ $store.state.count }}</h3> 在template模板中可以省略this 导入模式 通过计算属性 123456789import { mapState } from 'vuex'export de ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 12import NProgress from 'nprogress'import 'nprogress/nprogress.css' 为请求添加进度条效果 1234567891011// request拦截器(展示进度条)axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config})// 相应拦截器 （隐藏进度条）axios.interceptors.response.use(config => ...
7、项目优化及上线
项目仓库：https://github.com/changeclass/vue-shop 优化策略 生成打包报告 第三方库使用cdn ElementUI使用按需加载 路由懒加载 首页内容定制 添加进度条 安装nprogress依赖 导入包 12import NProgress from 'nprogress'import 'nprogress/nprogress.css' 为请求添加进度条效果 1234567891011// request拦截器(展示进度条)axios.interceptors.request.use(config => { NProgress.start() config.headers.Authorization = window.sessionStorage.getItem('token') return config})// 相应拦截器 （隐藏进度条）axios.interceptors.response.use(config => ...
6、订单管理功能及分析视图
项目仓库：https://github.com/changeclass/vue-shop 时间线 123456789<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的依赖包 在组件中导入 参照文档使用 12345678910111213141516171819202122232425262728293031 ...
5、商品列表功能开发
项目仓库：https://github.com/changeclass/vue-shop UI实现 时间格式化问题：可以设置一个全局的过滤器，对时间进行过滤 12345678910111213// 定义全局过滤器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 + ...
4、分类管理功能开发
项目仓库：https://github.com/changeclass/vue-shop UI 树形表格插件 插件地址：https://github.com/MisterTaki/vue-table-with-tree-gird 安装依赖 在入口文件导入插件并注册 12import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-table', TreeTable) 使用 123456789<tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" ...
3、权限管理功能开发
项目仓库：https://github.com/changeclass/vue-shop 创建子分支并推送 12git checkout -b rightsgit push -u origin rights 权限管理标签 根据不同等级分配不同颜色的标签。 1234567891011121314<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 ...
