django+vue兼容

安装node

Node.js

安装v14.17.1版本

---

安装vue-cli

运行命令安装vue-cli 3.12.1

sudo npm install -g @vue/cli@3.12.1

查看vue-cli是否安装成功

vue --version

代表成功

---

创建VUE项目

Cd到django项目中创建vue项目 方便项目管理以及方便资源读取

运行命令

vue create xxx

然后选择N 不使用默认配置 自定义vue配置

按照以下配置填写创建文件

出现这个就代表vue文件创建成功

---

vue-cil 项目目录结构

node_modules

:文件夹不要动用来存放vue依赖文件的

Public

静态资源，这里有一个index.html 模板,作为合成最终dist/index.html的骨架存在。

public下手动创建static文件夹用来存放js/css/图片等资源。django设置可以从static里取，vue就要设置在打包时往这个static里面存。

设置方法：vue_project根目录手动创建文件：vue.config.js ，内容为：

module.exports = {
    assetsDir:'static'
}

src文件夹

  Assets : 存放一些静态文件，我们不用这个之后。全部存到public/static下。

Components文件夹 : 小型组件存放位置

views文件夹：大型组件，母体组件存放位置。

App.vue ： 作为所有的.vue的一个主管存在。里面的样式很可能影响全局。

man.js : 作为打包过程必要的主脚本，里面的代码会影响全局。

router.js: 作为路由管理器的存在。

其他配置文件不要乱动。

django 适配

想办法把路由配置成从vue项目中的index.html进行关联上。

从前：url -> views.py -> .html的

现在：url -> .html

urls.py中：

from django.views.generic import TemplateView
path('index/',TemplateView.as_view(template_name='index.html'))

settings.py中：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue_project/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',
            ],
        },
    },
]

想办法把vue项目内的static文件夹下的静态资源关联上。

settings.py中：

#关联Vue静态资源
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"vue_project/dist/static"),
]

dist文件夹

dist文件夹 是vue打包后的 那个包本身。django要从dist里面拿到index.html和static的所有静态资源。

用户-电脑浏览器-django-dist包 -> vue-cli前端开发用的

打包命令：进入vue-cli 根目录下，就是我们的vue_project的根目录下。

执行 npm run build 即可打包

打包完成之后会生成dist文件夹

 

前端独立调试启动服务命令：npm run serve

 

---

兼容Element-UI

先打开官网

Element - The world's most popular Vue UI framework

使用npm安装

npm i element-ui -S****

查看VUE是否安装成功elm

打开package.json

如果有版本号以及elm这代表插件安装成功

修改vue设置

在main.js中引入以下设置

importVuefrom 'vue'
import App from './App.vue'
importrouterfrom './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false;
Vue.use(ElementUI);

newVue({
    el: '#app',
router,
    render: h => h(App)
}).$mount('#app')