安装node
安装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')
Original: https://blog.csdn.net/qq_30054199/article/details/123032301
Author: Leexzyy
Title: django+vue兼容
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/735746/
转载文章受原作者版权保护。转载请注明原作者出处！