# Vue全家桶

**Repository Path**: llcb-project/vue

## Basic Information

- **Project Name**: Vue全家桶
- **Description**: vue+vue-router+axios+vuex的整合
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-12-29
- **Last Updated**: 2021-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue全家桶
文档是对vue全家桶开发的一个总结, 其中包括 vue+vue-router+axios+vuex的整合

**若是跟着文档操作请务必先安装[nodejs](http://nodejs.cn/download/), 另外文档中只贴出了部分代码, 若是不理解请查看源码文件.**


## vue-cli
官网地址: https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过 @vue/cli 实现的交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
    - 可升级；
    - 基于 webpack 构建，并带有合理的默认配置；
    - 可以通过项目内的配置文件进行配置；
    - 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

### 安装vue-cli
安装vue-cli: ```npm install -g @vue/cli```

校验安装: ```vue -version```

卸载vue-cli: ```npm uninstall -g @vue/cli```

### 初始化项目
初始化项目: ```vue init <template-name> <project-name>```

参数说明:
- init 表示我要用vue-cli来初始化项目
- template-name ：表示模板名称，vue-cli官方为我们提供了5种模板:
    - webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
    - webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
    - browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
    - browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
    - simple-一个最简单的单页应用模板
 -  project-name ：标识项目名称，这个你可以根据自己的项目来起名字。
 
 在开发中都是用**webpack**模板 ```vue init webpack test```
 
 初始化完成之后进入项目的根目录, 执行以下操作:
 1. 安装依赖: ```npm sintall```
 2. 运行项目: ```npm run serve```
 3. 访问项目首页: http://localhost:8080
 
### vue-cli项目结构
最初的vue-cli项目结构的src下只有assets, components两个文件夹. 实际开发中远远不止. 参考开源项目[若依](https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui)

基本项目结构:
- node_modules: 项目开用到的包
- public: 
- src:
    - api: 同意调用后端接口的文件
    - assets: 放置公共资源
    - components: 放置vue公共组件
    - router: 放置vue路由配置文件
    - store: 放置vuex的配置文件
    - views: 放置路由跳转的页面
    - App.vue: 页面入口文件
    - main.js 程序入口文件，加载各种公共组件
- babel.config.js: ES6语法编译配置
- package.json: 项目基本信息
- package-lock.json: 锁定安装时的包的版本号


## vue-router
官网地址: https://router.vuejs.org/zh/

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为

### 安装vue-router
安装vue-router: ```npm install vue-router```

### 使用vue-router
1. 引入vue和vue-router
```
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)
```
2. 配置路由规则
```
export default new VueRouter({
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/mine",
            component: Mine
        },
        {
            path: "/about",
            component: About
        }
    ]
});

```
- routes: 路由数组
- path: 路由地址
- name: 路由名字
- component: 路由组件

3. 挂载路由
在main.js下挂载路由组件
```
import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
```

### 子路由(嵌套路由)
当我们从首页的路由跳转到一个页面你的时候, 那个页面下面也需要有路由跳转, 这时候需要配置子路由了.
1. 在需要路由的页面写上路由跳转地址和显示位置
```
<template>
  <div>
    <h2>个人中心</h2>
    <router-link to="/mine/hello1">Go To Hello1</router-link>
    <br>
    <router-link to="/mine/hello2">Go To Hello2</router-link>
    <router-view></router-view>
  </div>
</template>
```
2. 在路由的配置文件中为当前路由编写子路由
```
{
    path: "/mine", 
    component: Mine, 
    children: [
        {path: "/mine/hello1", component: Hello1},
        {path: "/mine/hello2", component: Hello2}
    ]
}
```


### vue-router参数传递 
vue-router常用传参的方式有**路由传参**和**props属性传参**两种

1. 通过动态路由传参
传递参数
```
{
    path: "/mine/hello1/:name", 
    component: Hello1
}
```

读取参数
```
<h2>Hello, This is {{$route.params.name}}</h2>
```

访问方式: http://localhost:8080/#/mine/hello1/xiaoming

2. 通过props传参
传递参数
```
{
    path: "/mine/hello2", 
    component: Hello2, 
    props: { name: "xiaoming"}
}
```

读取参数
```
<template>
  <div>
    <h2>Hello, {{name}}</h2>
  </div>
</template>

<script>
export default {
  name: "index",
  props: ["name"]
}
</script>

<style scoped>

</style>
```

### 编程式导航
1. 声明式导航和编程式导航的区别
- 声明式导航: ```<router-link :to="...">```
- 编程式导航: ```router.push(...)```
- 前进: ```router.go(1)```
- 后退: ```router.go(-1)```

2. 基本使用
无参路由
```
this.$router.push("/login");
```

通过name传参
```
this.$router.push({name: "home", params: {username: "xiaoming"}})
{{$route.params.username}}
```

通过path传参
```
this.$router.push({path: "/", query: {username: "xiaoming"}})
{{$route.query.username}}
```


## vuex
[Vuex](https://vuex.vuejs.org/zh/) 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

### 安装vuex
安装vuex: ```npm install vuex```

### 使用vuex
1. 引入vuex并挂载到vue上
```
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
```

2. 最简单的store
状态管理配置
```
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        },
        reduce(state) {
            state.count--
        }
    }
});
```
数据展示
```
<template>
  <div>
      <button @click="add">Add</button>
      <button @click="reduce">Reduce</button>
      <h3>{{this.$store.state.count}}</h3>
  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    add() {
      this.$store.commit("add");
    },
    reduce() {
      this.$store.commit("reduce");
    }
  }
}
</script>
```

### vuex的核心概念
1. State: 所以在vuex中定义的状态都保存在里面

2. Getters: Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

3. Mutations: 更改 Vuex 的 store 中的状态的唯一方法。在store中定义改变的规则, 使用commit(name)执行改变

4. Actions: Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

5. Modules: 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
   每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

### 使用vuex(store)的项目结构
官方推荐, 非强制性

- index.js: 我们组装模块并导出 store 的地方
- mutations.js: 根级别的 mutation
- actions.js: 根级别的 action
- modules:
    - moduleA: 模块a
    - moduleB: 模块b


## axios
[Axios](http://www.axios-js.com/zh-cn/) 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

### 安装axios
```npm install axios
```

### axios工具类
```
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

const http = new axios.create({
        baseURL: "/api",
        timeout: 3000
})

http.interceptors.request.use(
    config => {
        config.headers["token"] = "123456"
        return config
    },error => {
        console.log(error)
        Promise.reject(error)
    }
)


http.interceptors.response.use(
    res =>{
        return res.data
    }, error => {
        console.log(error)
        return Promise.reject(error)
    }
)

export default http
```

### 跨域处理
在项目的根目录下新建 vue.config.js 文件
```
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        open: true,
        proxy: {
            "/api": {
                target: `https://tcc.taobao.com/`,
                ws:true,
                changOrigin:true,
                pathRewrite:{
                    '^/api': '/'
                }
            }
        },
        disableHostCheck: true
    }
}
```