Vue CLI搭配Django快速开发前后端分离项目

1. 必要的环境、软件安装配置

1. 安装node.js
2. 安装编辑器pycharm和webstorm
3. 安装谷歌浏览器
4. npm换源

npm config set registry https://registry.npm.taobao.org
npm config get registry
npm install -g vue-cli

2. 脚手架创建 、使用webstorm打开浏览了解具体内容

1. 创建脚手架

vue init webpack vueproject
项目名称,项目描述,作者等4个回车
只安装vue-router,其他全是n
使用npm来安装,y

运行项目

cd vueproject
npm run dev

3. 路由、来看看前端是如何路由的

src里目录结构

1. assets:静态文件
2. component:放组件的
3. router:路由
4. App.ve:页面入口文件
5. main.js:程序入口文件，加载各种公共组件

创建路由

1. 新建一个组件User.vue

   <template>
   	<div id="user">
   		{
         {
         page_info } }
   	</div>
   </template>
   <script>
   	export default {
        
   		name: "User",
   		data(){
        
   			return {
        
   				page_info: "this User page"
   			}
   		}
   	}
   </script>
   <style scoped>
   </style>
   

2. 在router/index.js中配置User路由

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   import User from '@/components/User'
   
   Vue.use(Router)
   
   export default new Router({
        
     routes: [
       {
        
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },
       {
        
         path: '/user',
         name: 'User',
         component: User,
       }
     ]
   })
   

3. 在App.vue中应用路由/和/user

   <template>
     <div id="app">
       <img src="./assets/logo.png"><br />
       <router-link to="/">Root</router-link>
       <router-link to="/user">User</router-link>
       <hr />
       <router-view/>
     </div>
   </template>
   
   <script>
   export default {
        
     name: 'App'
   }
   </script>
   
   <style>
   #app {
        
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: