VUE的安装与Django之间打通数据

一 VUE的安装与项目创建

1.1、安装nodeJS

官网下载安装：https://nodejs.org/zh-cn/

1.2、安装脚手架

vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)
安装全局vue:：npm install -g @vue/cli
在指定目录下创建vue项目:

1.先在cmd界面中选择到要创建项目文件夹下: cd /D E:vue_project

2.vue create my-project(项目名称)

3.在cmd中创建的时候的一些选项:

4.项目创建成功显示的结果如下,然后切到创建的项目文件夹下:cd project_t

5.运行项目: npm run serve

或者可以用图形化界面创建: vue ui

二 vue目录结构

-node_modules:项目依赖(以后项目要传到git上,这个不能传)
-publish--->index.html 是总页面
-src :项目

-assets:静态资源
-components:组件
-views:视图组件
-APP.vue:根组件
-main.js :总的入口js
-router.js :路由相关,所有路由的配置,在这里面
-store.js :vuex状态管理器
-package.json:项目的依赖,npm install 是根据它来安装依赖的

三 Pycharm开发vue项目

1.需要安装vue.js插件
　　-setting--->plugins--->左下方install---->去搜索---->下载--->重启
2.运行vue项目
　　-editconfigration--->+--->npm--->run serve

四与django打通数据

1.每个组件会有三个部分:

-template
-style
-script

2.新组件创建

-创建一个组件
-去路由做配置:

import Course from './views/Course.vue'
    {
      path: '/course',
      name: 'course',
      component: Course
    }

在views的app中

<router-link to="/course">专题课程</router-link>

3.显示数据

script中:

  export default {
    data:function () {
        return{
        
            course:['python','linux'],
            aa:'我是aa'
        }
    }

4.方法绑定

<button @click="init">点我</button>

-script
    methods: {
        init: function () {
            alert('111')
        }
    }

5.vue中向django后台发送数据

相当于ajax:

-axios
-安装:npm install axios
-使用:
    -先在main中配置:
        import axios from 'axios'
        Vue.prototype.$http=axios
    -在组件中:
        this.$http.request().then().catch()
        this.$http.request({
            url:请求的地址
            method:请求方式
        }).then(function(response){
            ....函数回调处理
        })
    -注意:
        this需要在上面重新赋值给一个变量
        请求成功函数内部:
            _this.course=response.data