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