vue的搭建是和我去热饭大佬学习的
01
—
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 安装会有超时的风险，所以我们使用淘宝源安装。
代码语言：javascript复制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 为官方推荐模板
)
代码语言：javascript复制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
代码语言：javascript复制
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页面表示打通了。
02
—
预告
vue环境已经搭建好了下一步可以写个简单页面了，这个页面主要是为了备案域名给检查用的，所以会比较简单，主要是练习前端一部分知识。
