Vue项目

Posted 2022-04-02 zhangdajin

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：代码主体
...：项目、插件等相关配置
"""
?
""" src
assets：静态资源
components：小组件
views：视图组件
App.vue：根组件
main.js：主脚本文件
router.js：路由脚本文件 vue-router
store.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中配置
# 注册app
INSTALLED_APPS = [
    ...
    ‘corsheaders‘
]
# 添加中间件
MIDDLEWARE = [
    ...
    ‘corsheaders.middleware.CorsMiddleware‘
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
‘‘‘