vue-cli项目01

今日内容

vue-cli创建项目

# 下载node解释器
	-路径:http://nodejs.cn/
            
# 使用cnpm来代替npm
	- -g 表示装全局
    - 指令:npm install -g cnpm --registry=https://registry.npm.taobao.org
	-cnpm install -g @vue/cli
    
# 完成上述步骤后就可以创建vue-cli项目了(注意路径)
	-指令: vue create 项目名字
    """速度十分慢 可以ctrl+c停止 清除缓存并重新执行"""
    """npm cache clean --force"""

Vue项目目录介绍

# pycharm 打开项目 运行项目的两种方式
	-在命令行中执行(注意路径)
    -npm run serve
    -点击箭头图标即可执行
   
# vue项目目录介绍
# vue 项目目录介绍
vue01      # 项目名
	node_modules  # 非常多第三方模块，以后把项目复制给别人时【上传git要忽略掉】，这个文件夹删掉，很多小文件，项目的依赖，项目要运行，没有它不行  如果没有只需要执行 cnpm install，根据package.json的依赖包，按装好依赖、
    public              # 文件夹
    	-favicon.ico    # 网站小图标
        -index.html     # spa 单页面应用，以后整个vue项目都是用这一个html，但你不用动他
        
    src                  # 文件夹--以后咱们都动这里面的
        -assets          # 静态资源，以后前端用的图片，js，css。。都放在这里
    		logo.png       #  图片
        -components        # 以后在这里放组件， xx.vue, 小组件
			HelloWorld.vue  # 提供的展示组件
        -router               # 安装了Router，就会有这个文件夹，下面有个index.js
            index.js
        -store               # 安装了Vuex，就会有这个文件夹，下面有个index.js
            -index.js
        -views               # 页面组件
            -AboutView.vue
            -HomeView.vue
        -App.vue            # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在App.vue
        -main.js            # 项目的启动入口

	.gitignore             # git的忽略文件，后面学了git就会了
    babel.config.js        # bable配置文件，不用动
    jsconfig.json          # 配置文件，不用动
    package.json           #不用动，安装了第三方模块，它自动增加
    package-lock.json      # 锁定文件，忽略掉
    README.md              #  用户手册
    vue.config.js          # vue的配置文件

es6导入导出语法

1. App.vue,main.js,About.vue中写了什么

### 看xx.vue 组件学到的重点
# 以后开发vue项目的流程
	1.新建的xx.vue
 	2.在xx.vue中就三块内容
    	#1 html内容都需要写在此处
		<template>
		</template>
        #2 在此处写使用的样式
   		<style>
    	</style>
        #3 js的东西 都写着
    	<script>
		</script>
        
### main.js 学到的
# 找到index.html 中的id为app的div 以后都在App.vue中写
new Vue({
    render:h=>h(App)
}).$mount('#app')

2.导入导出语法

## python 创建包 在其他py文件中导入

## js 从es6开始 也支持包的导入和导出
	# 默认导出语法(用的最多) 只能导出一个 一般导出一个对象 
 	-导出语法
    	export default 一般是个对象
    -导入语法
    	import 别名 from '路径'
        之后使用别名就是导出的对象
        
## 命名导出导入
	-导出语法 可以导出多个(一个一个写即可)
    	export const name='哈哈哈'
        export const add = (a,b)=>{
            console.log(name)
            return a+b
        }
    	export const age = 19
	-导出语法(如果不导出 就会让这些属性和方法隐藏)
    	"""导出时只需加入自己需要的即可"""
    	import {name,add} from './xiaochen/aaa'
        console.log(name)
        console.log(add(33,55))
 
## 导入的简写形式(仅限于index.js文件)
	-包下的 index.js 导入的时候 可以不用写index.js的路径(等同于python的__init__.py)
    -eg:
        #包
        	cyf
            -index.js
        #导入的时候
        	import cyf from './cyf'

2.vue项目编写步骤

# 1 以后只需要写xx.vue
	-页面组件
 	-小组件 (提供给页面组件使用)
 
# 2 组件中导出
	export default {
        name:'HelloWorld',
        data(){
            return {
                xx: '小陈'
            }
        }
    }
	"""name是自带的 data中的数据要写成方法并且返回出去"""
  
# 3 在别的组件中要用 导入再注册
	# 导入
    """文件中所出现的@指的就是src"""
   	import HelloWorld from '@/components/HelloWorld.vue'
    import HelloWorld from '../components/HelloWorld.vue'
    # 注册
    export default {
        components:{
            HelloWorld
        }
    }
  
# 4 注册之后 在这个组件中就可以使用导入的组件 写在<template>中
	# 自定义属性
    <HelloWorld msg="传进来的p"/>

登入功能

访问根路径

# 访问根 显示 HomeView.vue 这个页面组件
	-HomeView使用了Helloworld.vue
    -自定义属性
# 访问 /about 会显示AboutView.vue页面组件

使用axios

1 安装 
	cnpm install axios -S    # 带着-S会自动把当前依赖加入到package.json中
"""
在完成下载之后 在package.json下的  "dependencies" 配置下会显示
"""

2 导入
	import axios from "axios"
  
3 使用
	handleClick() {
      console.log(this.username, this.password)
      axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(res => {
        // console.log(res)
        alert(res.data.msg)
      })
    }

解决跨域问题

#创建djangoi项目后 会出现跨域问题


1 装模块
	pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

2 注册app
	'corsheaders'
3 中间件修改
	'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
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'
)

scoped

# 父组件的样式 在子组件中会生效 加入scoped让样式只在当前组件中生效

<style scoped>
h1 {
  background-color: chartreuse;
}
</style>