Vue插件

项目功能插件

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

{ 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') }] }

1 2 3 4 5 6 7

<!-- 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 />

1 2 3

a.router-link-exact-active { color: #42b983; }

1 2 3 4 5

// 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

// 安装cookie的命令 // npm install vue-cookies --save // 为项目配置全局vue-cookie import VueCookies from 'vue-cookies' // 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问 Vue.prototype.$cookies = VueCookies

1 2 3 4 5 6

// 持久化存储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

import axios from 'axios' # 安装的模块不用加相对路径 axios.get().then()

1 2 3 4 5

// 安装 axios(ajax)的命令 // npm install axios--save // 为项目配置全局axios import Axios from 'axios' Vue.prototype.$ajax = Axios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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) })

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

# 用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 7

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