# vue-cli2基础集成

**Repository Path**: chenbz2/vue_integration

## Basic Information

- **Project Name**: vue-cli2基础集成
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-16
- **Last Updated**: 2021-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### # `vue_integration`项目说明书

<br />

### # 项目亮点

1. 路由懒加载（按需加载）
2. `CND`引用优化首屏加载
3. `cnd` 引用集成 `element-ui`
4. 集成全局 `css` 样式
5. 集成全局 `js`
6. 集成 `vuex` 进行全局变量状态管理
7. 集成全局路由守卫 `vue-router`
8. `cookie` 封装
9. `axios` 封装
10. 解决 `axios` 请求跨域
11. 添加 `views` 文件夹进行页面开发
12. 添加 `404` 错误页面
13. 开启 `vue `开发局域网内访问
14. 解决项目打包部署首页白屏问题

<br />

### # 使用说明

1、进入项目

```
cd vue_integration
```

> 以你的实际项目地址为准

2、初始化项目

```
npm install
```

3、通过开发模式运行

```
npm run dev
```

<br />

### # 封装使用说明

#### # `vuex`

获取变量

```
this.$store.state.变量名
```

获取方法

```
this.$store.getters.方法名
```

同步设置变量

```
this.$store.commit('方法名', {变量名: '值'})
```

异步设置方法

```
this.$store.dispatch('方法名', {变量名: '值'})
```

#### # `axios`

执行 GET 不带参请求

```js
this.$get('/videoRecommend?id=127398'
).then(res =>{
  console.log(res);
})
```

执行 GET 带参请求

```js
this.$get('/videoRecommend', {
  id: '127398'
}).then(res =>{
  console.log(res);
})
```

执行 POST 请求

```js
let postData = {
  city: '阳江'
};

this.$post('/type/add', postData 
).then(res =>{
  console.log(res);
})
```

#### # `cookie`

使用方法

```js
this.$cookie.方法名()
```

#### # 跨域接口

找到根目录下 `config` 文件夹下的 `index.js`

```js
module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: '后端请求接口',  // 后端请求接口
        changeOrigin: true,  // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    ......
  },
}
```

<br />

### # 目录详解

```
│  .babelrc
│  .editorconfig
│  .gitignore
│  .postcssrc.js
│  index.html		入口页面
│  md.text
│  package-lock.json
│  package.json
│  README.md
│  
├─.idea
│      misc.xml
│      modules.xml
│      vue_integration.iml
│      workspace.xml
│      
├─build		构建脚本目录
│      build.js		生产环境构建脚本
│      check-versions.js
│      logo.png
│      utils.js		构建相关工具方法
│      vue-loader.conf.js
│      webpack.base.conf.js		wabpack基础配置，这里引入cdn
│      webpack.dev.conf.js		wabpack开发环境配置
│      webpack.prod.conf.js		wabpack生产环境配置
│      
├─config		项目配置
│      dev.env.js		开发环境变量
│      index.js		项目配置文件，这里处理后台跨域
│      prod.env.js		生产环境变量
│  
├─node_modules		依赖包
├─src		源码目录
│  │  App.vue		根组件
│  │  main.js		全局js文件
│  │  
│  ├─assets		资源目录，这里的资源会被wabpack构建
│  │  │  logo.png
│  │  │  
│  │  ├─css
│  │  │      global.css		全局共享css
│  │  │      
│  │          
│  ├─components		公共组件目录
│  │      404.vue		404页面
│  │   
│  ├─utils		工具包
│  │      axios.js		axios封装
│  │      cookie.js		cookie封装
│  │      global.js		全局共享方法
│  │   
│  ├─router		前端路由
│  │      index.js
│  │      
│  ├─views		页面开发入口
│  │      index.vue
│  │      
│  └─vuex		全局变量状态管理
│          store.js
│          
└─static
        .gitkeep
```

<br />

### # 部署

1、运行打包命令

```
npm run build
```

2、项目文件夹多出来的 `dist` 文件夹就是我们已经打包好的项目文件夹