vue组件实际使用

复习

"""
1、环境
node：官网下载安装包，傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
vue/cli：cnpm install -g @vue/cli

2、项目创建
cd 存放项目的目录
vue create 项目名 => 需要安装的组件babel、vue-router、vuex

3、配置项目启动
pycharm打开项目，配置npm启动

4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境

5、vue-router配置路由:
    <router-link to=""></router-link> | this.$router.push() 完成跳转
    <router-view /> 完成页面组件的占位
    在router/index.js中 完成路由配置 路径-视图组件 映射关系
    两种路由传参
    配置              跳转              获取
    path:'/user'     to="/user?pk=1"   $route.query.pk
    path:'/user/:pk' to="/user/1"      $route.params.pk
    
    :to="{name: 'user'}"
    
6、组件生命周期钩子：组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
    created(){完成后台数据的请求}
    mounted(){完成极其耗时的后台数据请求}
    
7、js原型
Vue.prototype.count = 100
所有Vue实例都可以访问count
"""

vue的ajax插件：axios

"""
1）安装插件(一定要在项目目录下)：
    >: cnpm install axios
    
2）在main.js中配置：
    import axios from 'axios'
    Vue.prototype.$axios = axios;
    

3）在任何一个组件的逻辑中发送ajax请求：
    this.$axios({
        url: 'http://127.0.0.1:8000/cars/',
        method: 'get',
    }).then(response => {
        console.log(response);
        // this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log(error);
    });
    
"""

CORS跨域问题（同源策略）

"""
同源：http协议相同、ip服务器地址相同、app应用端口相同
跨域：协议、ip地址、应用端口有一个不同，就是跨域

Django默认是同源策略，存在跨越问题。
Django的解决方案：

1）Django按照cors模块：
    >: pip install django-cors-headers
    
2）在settings注册模块，配置中间件：
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

3）在settings开启允许跨越：
    CORS_ORIGIN_ALLOW_ALL = True
"""

Vue配置ElementUI

"""
1）安装插件(一定要在项目目录下)：
    >: cnpm install element-ui
    
2）在main.js中配置：
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    

3）使用：
    灵魂：复制粘贴
    
"""

Vue配置jq+bs：见其课件

安装插件

jQuery

>: cnpm install jquery

vue/cli 3 配置jQuery：在vue.config.js中配置(没有，手动项目根目录下新建)

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
        }
};

BootStrap

>: cnpm install bootstrap@3

vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

```

vue组件实际使用

原文：https://www.cnblogs.com/zhm-cyt/p/12074757.html