Vue插件

发表于 更新于 分类于 ， 本文字数： 3.6k 阅读时长 ≈ 3 分钟

项目功能插件

1、vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}
<!-- router-link渲染为a标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 为路由渲染的组件占位 -->
<router-view />
a.router-link-exact-active {
    color: #42b983;
}
// router的逻辑转跳
this.$router.push('/one-view')

// router采用history方式访问上一级
this.$router.go(-1)

2、vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
// state永远只能拥有一种状态值
state: {
    msg: "状态管理器"
},
// 让state拥有多个状态值
mutations: {
    // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 让mutations拥有多个状态值
actions: {

}

3、vue-cookies

1
2
3
4
5
6
7
8
9
10
11
12
// 安装cookie的命令
// npm install vue-cookies --save
// 为项目配置全局vue-cookie
import VueCookies from 'vue-cookies'
// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
Vue.prototype.$cookies = VueCookies
// 持久化存储val的值到cookie中
this.$cookies.set('val', this.val, 300)
// 获取cookie中val字段值
this.$cookies.get('val')
// 删除cookie键值对
this.$cookies.remove('val')

4、axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import axios from 'axios' # 安装的模块不用加相对路径

axios.get().then()
// 安装 axios(ajax)的命令
// npm install axios--save
// 为项目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios
let _this = this
this.$ajax({
    method: 'post',
    url: 'http://127.0.0.1:5000/loginAction',
    params: {
        usr: this.usr,
        ps: this.ps
    }
}).then(function(res) {
    // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
    // 要更新页面的title变量,title属于vue实例
    // res为回调的对象,该对象的data属性就是后台返回的数据
    _this.title = res.data
}).catch(function(err) {
    window.console.log(err)
})
# 用pycharm启动该文件模拟后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "<h1>主页</h1>"

@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
    # print(request.args)
    # print(request.form)
    # print(request.values)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'abc' or ps != '123':
        return 'login failed'
    return 'login success'


if __name__ == '__main__':
    app.run()

5、跨域问题解决

1
2
3
4
5
# http://www.mei.com/silo/women 响应头中Access-Control-Allow-Origin: * 允许所有的域访问
# 以猫眼电影为例 ：https://m.maoyan.com/#movie

# devServer.proxy
# https://cli.vuejs.org/zh/config/#devserver-proxy

vue.config.js

1
2
3
4
5
6
7
8
9
10
module.exports = {
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://m.maoyan.com/',
        changeOrigin: true
      }
    }
  }
}

组件中

1
2
3
4
5
6
import axios from 'axios'
mounted () {
  axios.get('ajax/moreClassicList?sortId=1&showType=3').then(res => {
    console.log(res.data)
  })
}