<p align="center">
  <a href="https://github.com/pegasus-1998/vue2-taobao.git" target="_blank">
    <img width="180" src="https://cn.vuejs.org/images/logo.svg">
  </a>
</p>

<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-2.0-brightgreen.svg" >
  </a>
  <a href="https://github.com/ElemeFE/element">
    <img src="https://img.shields.io/badge/element--ui-2.x-blue">
  </a>
  <a href="https://github.com/826327700/vue-piczoom">
    <img src="https://img.shields.io/badge/piczoom-1.x-blue">
  </a>
  <a href="https://github.com/boenfu/vuex-along">
    <img src="https://img.shields.io/badge/along-1.x-blue">
  </a>
</p>

## 简介

vue2-shop-admin(页面上的图片、内容、链接等素材来自于淘宝网)

vue2 + element-ui(组件库 + 主题 + 按需引入) + axios(http库) + dayjs(处理时间库) + jwchat + echarts...

项目会不断更新优化。如果有要作者修改的地方，敬请提出你的宝贵建议，本人会及时更改。

项目起始： 2021-07

## 前言

:blush:vue3也出了快一年了，自己在工作中vue项目大大小小也做了好几个，但是一直没有自己的vue开源项目。到2021年下询的时候便开始着手这个项目。项目中的图片内容链接等源于淘宝网。项目的模块划分的十分清楚，非常方便阅读。这个项目基本把vue2能用到的全用到了。如果觉得有写的不好的或者不足之处请联系作者。如果对你或者对你的项目有些许帮助的话给作者来个赞吧！

:blush:qq: 2226984343; wx: pegasus-1998

## 技术栈

> [vue.js](https://cn.vuejs.org/) 构建用户界面的 MVVM 框架， 易于上手，还便于与第三方库或既有项目合。

> [vue-router](https://router.vuejs.org/zh/) Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

> [vuex](https://vuex.vuejs.org/zh/) 是一个专为 Vue.js 应用程序开发的状态管理模式。

> [vue-cli](https://cli.vuejs.org/zh/) 基于 Vue.js 进行快速开发的完整系统，vue脚手架。

> [element-ui](https://element.eleme.cn/#/zh-CN) 基于 Vue 2.0 的桌面端组件库, PC端而言这应该是vue用的最多的组件库。

> [axios](https://www.w3cschool.cn/jquti/) Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js中。

> [scss](https://www.sass.hk/docs/) css扩展语言，更高效地开发项目，Element的theme-chalk使用SCSS编写。

> [vuex-along](https://www.npmjs.com/package/vuex-along) 持久化存储state的 vuex扩展。解决vuex中页面刷新数据丢失问题。

> [vue-lazyload](https://github.com/hilongjw/vue-lazyload) vue图片懒加载

> [vue-piczoom](https://www.npmjs.com/package/vue-piczoom/v/1.0.6) 基于vue2.x的电商图片放大镜插件。注：采用了node-scss导致有些人安装失败，已弃用。

> [vue2.0-zoom](https://github.com/jsonpeter/vue2.0-zoom) 基于vue的图片放大镜效果插件，代替vue-piczoom。

> [jwchat](https://codegi.gitee.io/jwchatdoc/) 基于element-ui开发的聊天插件。

> [Lodash](https://www.lodashjs.com/) 一致性、模块化、高性能的 JavaScript 实用工具库。

> [vue-awesome-swiper ](https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3) vue中swiper轮播

> [fastmock](https://fastmock.site/#/) 简单好用的在线接口 MOCK 平台

> [nanoid](https://github.com/ai/nanoid/) 字符串ID生成器

> [vue-clock2](https://www.npmjs.com/package/vue-clock2) 时钟

> [dayjs](https://dayjs.gitee.io/docs/zh-CN/installation/installation) 时间、日期处理

> [echarts](https://echarts.apache.org/zh/index.html) 一个基于 JavaScript 的开源可视化图表库

:blush:除开上面项目中还用到其它的...等

## VScode + Vue

Vue2开发插件-- Vetur

Vue3开发插件-- Vue Language Features (Volar)

:blush:注意：如果之前已经安装了Vetru(Vue2插件)。 要想Vue3中使用Volar，先禁用Vetur(必须禁用), 然后重启电脑。

## 步骤

`npm install`  or  `yarn install`  :blush:(安装依赖)

`npm run serve`  or  `yarn serve`   :blush:(运行)

`npm run build`  or  `yarn build`  :blush:(打包)

## 链接

- [github地址](https://github.com/pegasus-1998)
- [天马导航-前端知识收集地址](http://pgs98.com)

## License

[MIT](https://github.com/pegasus-1998/vue2-shop-admin/blob/master/LICENSE)
