django+vue初步使用

准備工作：IDE，【JetBrains PyCharm2018】【webpack 3.3.0】【python3.7.0】【npm5.8.0】【vue-cli2.9.6】，這是我當前的版本，基本python不低於2.0，本例子都可以運行成功

1，打開PyCharm創建一個創建Django項目

django-admin startproject pc_admin

創建成功后目錄如下

.
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

2，進入項目根目錄，創建一個 App 作為項目后端

cd pc_admin
python manage.py startapp backend       　　　　　　//backend就是app名稱

創建成功后目錄如下

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

3， 使用vue-cli在根目錄創建一個名稱叫【frontend】的Vue.js項目作為項目前端

vue-init webpack frontend

創建成功后目錄如下

.
├── backend
│   ├── __init__.py
│   ├── admin.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── frontend
│   ├── README.md
│   ├── build
│   │   └── ....
│   ├── config
│   │   ├── dev.env.js
│   │   ├── index.js
│   │   ├── prod.env.js
│   │   └── test.env.js
│   ├── index.html
│   ├── package.json
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   └── main.js
│   ├── static
│   └── test
│       └── ...
├── manage.py
└── pc_admin
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

 

我們可以在vue中加入一些常用組件，如element-ui等，再隨便添加倆個例子

frontend/src/HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-row>
    <el-button>默認按鈕</el-button>
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="success">成功按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
  </el-row>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [{
        value: '選項1',
        label: '黃金糕'
      }, {
        value: '選項2',
        label: '雙皮奶'
      }, {
        value: '選項3',
        label: '蚵仔煎'
      }, {
        value: '選項4',
        label: '龍須面'
      }, {
        value: '選項5',
        label: '北京烤鴨'
      }],
      value: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

4，使用 webpack 打包vue項目

cd frontend
npm install
npm run build

此時直接運行npm run dev也可以直接查看前端 vue界面

構建完成會生成一個文件夾，名字叫dist，里面有一個 index.html 和一個 文件夾static。

5， 使用Django的通用視圖 TemplateView修改靜態指向路徑（就是讓Django訪問目錄指向我們剛才打包的dist/index.html）

找到項目根 ulb_manager/urls.py文件作出如下修改

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView //注意加上這句

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name="index.html")),
]

6. 配置Django項目的模板搜索路徑和靜態文件搜索路徑 找到根目錄下 ulb_manager/settings.py文件並打開，找到TEMPLATES配置項，修改如下:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS':['frontend/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# Add for vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

7，此時,因為使用的element-ui組件,但是我們未安裝element-ui,所以需要安裝element-ui.

1)進入項目根目錄后,安裝element-ui

npm i element-ui -S

2)全局引入element ui

在main.js中添加element-ui引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

 

 3)運行項目

npm run dev

 

7，到此基本就配置完成了，運行命令就可以直接查看效果

python manage.py runserver

 

注意:在2)基礎上可以

2）、按需引入element ui

按需引入可以減少項目體積
首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

 

修改 .babelrc 文件

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "stage-2"
      ],
      "plugins": [
        "transform-vue-jsx",
        "transform-es2015-modules-commonjs",
        "dynamic-import-node"
      ]
    }
  }
}

 

 

 

 

 

 在main.js中按需引入模塊

import { Button, Select } from 'element-ui'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

 

 在組件中使用button

 

 運行項目

npm run dev

 

 

2、使用element ui

1）、使用按鈕

在組件中使用element的按鈕

 

 

 

 2）、Container 布局

<el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器。

此功能做布局非常快

  <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>導航一</template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="1-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">選項4</template>
              <el-menu-item index="1-4-1">選項4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>導航二</template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="2-1">選項1</el-menu-item>
              <el-menu-item index="2-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="2-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">選項4</template>
              <el-menu-item index="2-4-1">選項4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>導航三</template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="3-1">選項1</el-menu-item>
              <el-menu-item index="3-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="3-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">選項4</template>
              <el-menu-item index="3-4-1">選項4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

    </el-container>

 

 參考:https://www.cnblogs.com/zhixi/p/9996832.html

參考:https://blog.csdn.net/k393393/article/details/103303043