Vue项目

Vue项目需要自建服务器：node

1.用C++语言编写，用来运行JavaScript语言2.node可以为前端项目提供server (包含了socket)安装步骤：1.登录https://nodejs.org/zh-cn/该网址下载安装包2.双击安装包直接运行，根据提示下一步直至完成安装

npm:包管理器 - 为node拓展功能的

# 换国内源，加速下载# 管理员命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org​# 索引npm的指令都可以换成cnpm# npm install vuex => cnpm install vuex

 

vue cli环境：脚手架 - 命令行快速创建项目

"""cnpm install -g @vue/cli​如果报错：npm cache clean --force"""

 

创建Vue项目

"""起步1.cd 到目标目录2.创建项目：vue create 目录名"""​​""" 创建项目的过程提示下载源：选择淘宝镜像​具体配置：上下键切换，空格键选择，回车键进入下一步1.第二个选项进入自定义配置2.Babel jsES6语法转换ES5，Router路由, Vuex组件数据交互, Formatter格式化代码3...有提示选择大写，没提示默认第一个即可"""​

启动项目

""" 终端启动1.进入项目：cd到项目目录2.启动项目：npm run serve"""​""" pycharm配置1.按照vue.js插件，重启2.配置项目的npm启动项"""项目迁移，将源文件的目录以及文件拷贝到其他文件夹下，然后切换目录，命令行运行cnpm install,会自动生成node_modules文件夹(依赖)

项目目录

"""node_modules：依赖public：共有资源 ico：页面标签的logo html：单页面 - 整个项目的唯一页面src：代码主体...：项目、插件等相关配置"""​""" srcassets：静态资源components：小组件views：视图组件App.vue：根组件main.js：主脚本文件router.js：路由脚本文件 vue-routerstore.js：仓库脚本文件 vuex"""

 

组件

<template>    <!-- 只能有一个根标签 --></template>​<script>    export default {        name: "Main",        data: function() {            return {                           }       },        ...   }</script>​<style scoped> /* scoped */</style>

 

在根组件中渲染页面组件

<!-- Main.vue 主页组件 --><template>    <div class="main">        <h1>{{ title }}</h1>    </div></template>​<script>    export default {        name: "Main",        data: function () {            return {                title: '主页'           }       }   }</script>​<style scoped>    .main {        height: 100vh;        background-color: orange;   }    h1 {        margin: 0;        color: red;   }</style> <!-- App.vue根组件 --><template>    <div id="app">        <!-- 3.使用 -->        <Main></Main>    </div></template><script>    // 1.导入    import Main from '@/views/Main'    export default {        // 2.注册        components: {            Main: Main       }   }</script><style>    html, body {        margin: 0;   }</style>

 

路由：router.js

在根组件中设计转跳页面的导航栏

创建三个页面组件

配置路由

前后台交互

安装axios的命令

npm install axios --save

为项目配置axios

import Axios from 'axios'

Vue.prototype.$ajax = Axios

 

Django跨域问题

什么是跨域

'''通常情况下，A网页访问B服务器资源时，不满足以下三个条件其一就是跨域访问1. 协议不同2. 端口不同3. 主机不同'''

Django解决跨域

'''安装django-cors-headers模块​在settings.py中配置# 注册appINSTALLED_APPS = [ ... 'corsheaders']# 添加中间件MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware']# 允许跨域源CORS_ORIGIN_ALLOW_ALL = True'''

 

 

 

 

转载于:https://www.cnblogs.com/zhangdajin/p/11165541.html