从零搭建一个django项目-4-搭建vue环境

怪盗LYL

发布于 2022-06-13 13:17:46

8970

文章被收录于专栏：测试开发真货测试开发真货

vue的搭建是和我去热饭大佬学习的

—

vue环境搭建

1、首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/

我是Windows系统所以下载msi文件，双击后一路下一步就可以了（可以选择自己喜欢的安装路径）。

插播一下：在myapp下面新建一个url.py，将那两条路由复制过去。并且将django_wx下面的url文件改成下面那样。

from django.contrib import admin
from django.urls import path, re_path, include
from myapp.views import get_weatherinfo_base, get_weatherinfo_all
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls')),  #添加api请求转发
]

继续我们的vue，npm 安装会有超时的风险，所以我们使用淘宝源安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v #查看版本
cnpm install -g @vue/cli #安装vue
vue -V #查看vue版本

安装好了以后就可以创建vue项目了，在项目根目录vue create 项目名

(

vue create：vue -cli3.x 版本的初始方式，启动方式默认为 npm run serve

vue init webpack : vue -cli2.x 版本的初始化方式，启动方式默认为 npm run dev ，webpack 为官方推荐模板

)

vue create wx_vue
cd wx_vue
npm run serve

可以看到提示运行成功了并且给了我们一个访问地址，通过浏览器打开如果看到下面这个页面表示运行成功。

为了集合vue和django需要进行一些配置：

public下手动创建static文件夹用来存放静态资源，和存放vue打包后的文件。修改wx_vue下面的vue.config.js添加assetsDir:'static',

不添加assetsDir之前build生成打包，

和添加了assetsDir之后build生成打包，打包命令：npm run build

修改django


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS': ['wx_vue/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',
            ],
        },
    },
]
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,"wx_vue/dist/static"),
]

重新运行django（在此之前vue buld过）：访问http://127.0.0.1:8000/index/ 看到vue页面表示打通了。