# vue_shop

**Repository Path**: mcgee0731/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-09-10
- **Last Updated**: 2021-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_shop

#### 介绍
电商后台管理系统
基于vue，element-ui，vue-router, axios
#### 需要掌握的知识
```
* `html`
* `css、less`
* `js`
* `node.js环境（npm包管理工具）`
* `webpack打包工具`
```
 
#### vue-cli3.0版本脚手架
- npm install -g @vue/cli **注意mac加sudo**
- vue -V 查看版本号

备注：vue框架的版本是2，上面的都是查看脚手架的版本是3及以上
#### 通过脚手架创建项目
方式1：vue create `<project-name>`
- 推荐 gui的形式，通过可视化的面板来创建vue项目
打开终端输入 vue ui 启动gui面板
- 启动后，开始创建 新项目

#### 添加必备插件
安装：vue-cli-plugin-element-ui
配置插件：import on demond 按需导入
安装到插件里而不是依赖里是因为插件可以配置按需导入

#### 添加必备的依赖
axios执行依赖
如果eslint格式校驗失敗，看下右下角eslint是否开启


设置格式校验程序的优先级

配置settings.json
```
// 调整窗口的缩放级别 
"window.zoomLevel": 0, 
// 定一个默认格式化程序，该程序优先于其他格式化程序  
"[javascript]": {    
    "editor.defaultFormatter": "HookyQR.beautify"
}
```
#### 阿里图标库使用
- iconfont，在官网[https://www.iconfont.cn/](https://www.iconfont.cn/)下载需要的图标，
- 下载代码，把整个代码包添加到项目assets中，在main中引入包中的css文件
```
import './assets/font_el6l40lmrmn/iconfont.css'
```
使用方法
```
<i class="iconfont icon-suo"></i>
```

#### 类似于element-ui依赖
ant-design-vue  ui组件库

#### 上线优化
1. nprogress包 在axios的请求拦截器和相应拦截器里添加
2. babel-plugin-transfrom-remove-console包  去除cosole.log 
3. 查看文件体积，优化文件，打包时生成打包报告， vue-cli-service build --report    可以生成report.html，or 可视化面板，（资源，模块，依赖项占资源百分比）
4. 速度统计，不同网络状态下项目加载时间
5. vue.config.js修改webpack默认配置 修改入口项分环境
6. externals加载外部CDN资源，通过import引入第三方，打包后体积过大，声明在externals里的都不会被打包，会从window（dist/index.html）直接查找value，
7. element-ui组件打包,去掉插件的按需引入，index里添加cdn，
8. 插件方式对首页index内容自定制，按开发生产模式加载
9. 不同路由对应的组件，分割成不同的代码块，当用户访问对应路由的时候，才去加载路由对应的组件， @babel/plugin-syntax-dynamic-import包，bale.config引入包
10. 创建node服务器，用express托管，用express添加gzip压缩提升network传输速度，启动http。