Vue CLI项目开发工具使用指南

Vue.js 开发的标准工具

下载流程

1.首先在终端/cmd 确保有了node.js, 如果没有百度node.js下载即可

2.有了node.js就可以直接下载Vue CLI了官方下载地址：

https://cli.vuejs.org/zh/

安装指令，在终端中输入 npm install -g @vue/cli 即可自动下载安装

创建一个vue项目

在终端中输入命令 vue create '项目名'

安装这样的选择就可以创建成功一个vue项目

使用pycharm打开项目

使用pycharm直接打开刚刚创建好的vue文件，然后设置运行方式

这也就可以成功启动了

VUE项目目录介绍

dist: 打包的项目目录(打包后会生成)

node_modules文件夹: 项目依赖(删掉，不上传git，如果没有使用npm install重新安装)
# 这个项目如果复制给别人的时候需要删除

public: 共用资源
	--favicon.ico    # 网页小图标
	--index.html:    # 项目入口页面，spa单页面 整个vue项目都使用者一个html 不要动
  
src: 项目核心,我们写代码的地方
	-- assets:资源    # 资源放置的地方，可以放 图片 css文件，js文件等
      --logo.png
     
	-- components: 放组件的地方 XX.vue文件
     --xxx.vue文件  # 放小组件的地方 功能组件
    
  -- router.js: 路由文件  
         index.js   # 创建vue项目的时候安装了router就会有
	-- store.js: 状态库文件
         index.js   # 创建vue项目的时候安装了vuex就会有
                   
	-- views:视图组件   
        --xxx.vue文件  # 放置整个页面组件的地方
	-- App.vue: 根组件
	-- main.js: 入口js
  package.json   # 可以设置项目名字，项目网页显示的标题名

vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）

VUE文件基本规范

#  记住，以后开发vue项目，都按照这个模式来
1 新建xx.vue
2 在xx.vue中就三块内容
	#1 以后组件的html内容，都写在这里
	<template>
	</template>
    
  #2 以后该组件使用的样式，都写在这
    <style>
    </style>
    
  # 3 以后js的东西，都写在这
  <script>
	</script>

导入导出语法

当我们再src文件中自己创建一个js文件 在其他文件上如果想用数据 需要把该页面数据导出
其他页面导入数据才可以共享

var name= 'moon'
function add(a,b){
    return a+b
}


默认导出语法：
export default {name,add}
#  导出语法 这里导出什么，其他页面才可以拿到什么,也可以导出对象 函数
#  导出多个数据合集 只能导出一次


默认导入语法：
import s1 from './login/s1'
# 使用名称s1来接受文件夹 login里面的s1文件导出的所有数据
# 用s1来接收数据合集，

console.log(s1.name)
console.log(s1.add(1,2))
# 然后通过该名称 s1.变量名方式 来调用数据  可以直接获取到


命名导出语法:
export const myname=name
export const myadd=add
# 通过定义变量，精确导出具体的数据，可以导出多个 
# 导出一个变量 


命名导入语法:
import {myname,myadd}from './login/s1'
# 可以直接接收具体的导出数据，接收到后可以直接使用
# 导入一个变量
console.log(myname)
console.log(myadd(1,2))

VUE项目编写步骤

我们基本都在src里面编写代码


1.components文件夹 用来存放小组件 局部组件
    --见名知意.vue    局部组件
    
<template>
   <!--局部组件的样式-->
  <div class="hello">
    <h2>我是局部组件hello world</h2>
    <h1>{{ name }}</h1>
    <h1>{{ msg }}</h1>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  <!-- 导出的名字，其他组件导入就是这个名字，-->
  data() {
      <!-- 导出的数据-->
    return {name: '张无忌'}
  },
  props: {
    <!--接收父组件自定义属性传来的数据-->
    msg: String
  }
}
</script>  
  



2.我们都在views文件中编写页面组件
     --'页面名'.vue   
页面组件内可以调用局部组件来搭配展示，也可以给局部组件传递数据展示 


<template>
  <div class="home">
       <!--页面的样式-->
    <HelloWorld msg="传进来的" />
      <!--展示局部组件，并给局部组件传递变量msg-->
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
   <!--导入局部组件-->

export default {
  name: 'HomeView',
  <!--导入页面名字-->
  components: {
    <!--把导入的局部组件进行注册，这样就可以使用了-->
    HelloWorld
  }
}
</script>

scoped 父组件样式不影响子组件


# 父组件的样式，在子组件中会生效，加入scoped让该样式只在当前组件中生效
<style scoped>
h1 {
  background-color: chartreuse;
}
</style>

VUE与后端交互axios

1.npm install axios -S  按照

2.导入 import axios from 'axios'

3.使用
export default {
  name: 'login',
  data(){

    return {username:'',password:''}
  },
  methods:{
    loginClick(){
      axios.post('http://127.0.0.1:8001/api/user/login/',{
        username:this.username,
        password:this.password,
      }).then(res=>{
        alert(res.data.message)
      })
    }
  }
}
</script>

Python django解决跨域问题

1.下载模块 pip3.8 install django-cors-headers

2.在settings中注册app 	'corsheaders'

3.在settings中间件添加 'corsheaders.middleware.CorsMiddleware',

4.在settings文件最底部添加配置文件
 CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)