目录

1. 版本依赖
2. Django项目的创建
3. Vue项目的创建
4. Django关联Vue

---

版本依赖

名称	版本号
Python	3.6.2
Django	1.8.19
Vue	2.9.1
Node	6.10.0

Django是Python体系下最成熟的web框架之一，但本身的模板引擎不够强大，且无法做到前后端分离。Vue.js是一个JS的MVVM库，以数据驱动和组件化的思想构建的，支持双向绑定；可以配合Django实现前后端分离；

---

Django项目的创建

1. 操作流程

1. 新建一个目录workspace ；
2. 在命令行中执行django-admin startproject blog ;
3. cd blog 进入blog项目目录，然后执行python3 manage.py startapp article ;

4. 在blog目录下的setting.py文件中添加应用到INSTALLED_APPS配置中 ;

   INSTALLED_APPS = (
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       'article', // 新增应用
   )

5. 在项目根目录下运行 python3 manage.py runserver ;

   注：如果在命令行中看到以下错误信息：请先执行python manage.py migrate命令，然后重新执行第5步；
   You have unapplied migrations; your app may not work properly until they are applied.
   Run ‘python manage.py migrate’ to apply them.

2. 项目目录结构

• workspace –> 文件夹
  
  • manage.py
  • blog –> 文件夹
    
    • init__.py
    • settings.py –> 项目的配置文件
    • urls.py –> url的总入口
    • wsgi.py
  • article –> 文件夹(新项目)
    
    • init.py
    • admin.py
    • models.py
    • tests.py
    • views.py
    • migrations –> 文件夹
      
      • init.py

---

Vue项目的创建

1. 操作流程

1. 在article文件夹的同级目录下执行vue-init webpack blogweb ;

   1. 如果还没有安装vue-cli 的先用npm安装vue-cli脚手架工具；
      命令：npm install -g vue-cli
   2. 项目初始化过程中，请同时选择安装vue-router，在初始化项目过程中会有提醒 ;

2. cd blogweb 进入blogweb项目目录，然后执行npm install 安装vue所须要的node依赖 ;

3. 执行npm run build生成build后的文件；
   

   1. 在build过程中如果出现关于Lint相关的问题，可以在Vue项目的config–>index.js文件中将useEslint: true改为false ;
      
   2. build后生成一个dist文件夹，里面包含一个 index.html 和一个static 文件夹 ;
   3. 运行npm run dev,在浏览器中输入http://localhost:8080 查看页面效果；

   
   

项目目录结构

• blogweb
  
  • build // 项目构建(webpack)相关代码
    
    • build.js // 生产环境构建代码
    • check-version.js // 检查node、npm等版本
    • dev-client.js // 热重载相关
    • dev-server.js // 构建本地服务器
    • utils.js // 构建工具相关
    • webpack.base.conf.js // webpack基础配置
    • webpack.dev.conf.js // webpack开发环境配置
    • webpack.prod.conf.js // webpack生产环境配置
  • config // 项目开发环境配置
    
    • dev.env.js // 开发环境变量
    • index.js // 项目一些配置变量
    • prod.env.js // 生产环境变量
    • test.env.js // 测试环境变量
  • src // 源码目录
    
    • components // vue公共组件
    • store // vuex的状态管理
    • App.vue // 页面入口文件
    • main.js // 程序入口文件，加载各种公共组件
  • static // 静态文件，比如一些图片，json数据等
  • .babelrc // ES6语法编译配置
  • .editorconfig // 定义代码格式
  • .gitignore // git上传需要忽略的文件格式
  • README.md // 项目说明
  • favicon.ico
  • index.html // 入口页面
  • package.json // 项目基本信息

至此，Django项目和Vue项目就全部创建完毕；

---

Django关联Vue

现在Django充当一个服务器的角色，而Vue充当一个展示页面的角色，如何让Django去关联到Vue的页面呢？

1. 在blog目录的urls.py文件中添加如下设置：

   urlpatterns = [
       url(r'^admin/', admin.site.urls),
   
       #添加这一行，让空串直接关联到index.html页面
       url(r'^$', TemplateView.as_view(template_name="index.html")),
   
       #引入article应用的urls
       url(r'^article/', include('article.urls', namespace='article'))
   ]

2. 配置Django项目的模板搜索路径(blog目录下的settings.py文件)：

   TEMPLATES = [
       {
           'BACKEND': 'django.template.backends.django.DjangoTemplates',
           'DIRS': ['blogweb/dist'], #这里将模板的路径指引向blogweb目录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',
               ],
           },
       },
   ]
   
   
   # Add for vue.js
   
   STATICFILES_DIRS = [
       #添加这一行,可以获取到vue项目的静态资源
       os.path.join(BASE_DIR, "blogweb/dist/static"),
   ]

3. 运行python3 manage.py runserver指令，然后再浏览器中输入 http://127.0.0.1:8000 查看的页面效果和Vue项目运行 npm run dev 指令后在浏览器中输入 http://localhost:8080 一样的页面效果；