Django +vue.js实现前后端分离（十三）

1.安装vue环境

• 下载安装node.js，配置环境变量
• 下载npm ， nodejs下的包管理器
• webpack：它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。 npm install webpack -g
• 安装vue脚手架 npm install --global vue-cli 用于生成vue工程模板

2.创建项目

• 创建django项目 django-admin startproject ulb_manager
• 创建django下app作为项目后端 python manage,py startapp backend
• 在setting,py下的INSTALLED_APP配置下添加 backend
• 使用vue-init webpack frontend 创建一个vue项目作为前端
• npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
• 打包编译vue项目，进入vue根目录，npm install， npm run build
• 使用django的通用视图TemplateView

  urlpatterns = [
      url(r'^admin/', admin.site.urls),
      url(r'^$',TemplateView.as_view(template_name="index.html")),
      #url(r'^api/',include('backend.urls', namespace='api'))

  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。 ]
• 配置django项目的模板搜索路径 'DIRS':['frontend/dist'],
• 配置静态文件搜索路径 打开 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置，没有则自行添加

• STATICFILES_DIRS = [
      os.path.join(BASE_DIR, "frontend/dist/static"),
  ]

• 运行django项目

• 运行正常界面
•