django+vue初步使用
阿新 • • 發佈：2021-10-28
準備工作：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