# netEasy

**Repository Path**: upupupy/net-easy

## Basic Information

- **Project Name**: netEasy
- **Description**: 使用vue + vant框架 仿照网易严选移动端，主要学习了vant的配置与使用以及rem响应，以及构造移动端适配器。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-27
- **Last Updated**: 2021-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# neteasy

> 仿照网易严选

### Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

### 使用脚手架创建项目

```
vue init webpack neteasy
```

### 初始化项目

```
npm install
```

### 安装vant框架

```
// https://youzan.github.io/vant/#/zh-CN/home
// vue 2
npm i vant -S
```

###  自动按需引入组件 (推荐)

```
#安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
```

### .babelrc是什么文件？

> rc结尾的文件，一般都是运行时自动加载的文件、配置文件等。
>
> 现在es6还没有被所有浏览器都支持
>
> 所以需要babel将es6转换成浏览器能够识别的代码
>
> 所以 .babelrc 文件是用来设置转码的规则和插件的

在.babelr文件里的plugins，是引用插件来处理代码的转换的。

> "transform-vue-jsx", 用来编译jsx的
>
>   "transform-runtime" 用来处理全局函数、优化babel插件
>
> *"libraryDirectory"*: "es"
>
> 就是采用es6模块的项目
>
> 通过import es6来引用模块的文件
>
> 这样打包的体积会更小

### 创建中间件

创建一个中间件nodemiddleware文件(在根目录下创建)

```
1、npm install express -save-d
2、在node_modules文件中能找到express文件
3、在nodemiddleware文件里创建一个.js文件
4、在.js文件中导入express文件
```

```javascript
// .js文件
// 导入express
var express = require('express')
  // 启动express
var app = express();

app.get('/home', function(req, res) {
  res.send('我是csy，给你发数据的');
})

// 监听
app.listen(5632, function() {
  console.log('端口号为5632,网易严选中间件，已经运行');
})
```

在中间件文件夹处开启服务器

```JavaScript
node neteasy_middleware.js
然后再在浏览器输入 localhost:5632/home
即可以看到数据"我是csy，是给你发数据的"
```

vue 文件想要请求中间件数据，还需要安装axios

```javascript
// 在根目录下运行安装axios
npm install axios
```

在main.js文件中全局引入axios

```javascript
import axios from 'axios'
// 设置基地址
axios.defaults.baseURL = 'http://localhost:8080';
Vue.prototype.$axios = axios;
```

### 吸顶

使用vant框架中的sticky组件

### 路由跳转

使用vue-router来进行路由跳转

### 抽取footer组件