前端开发之Vue框架

一、Node环境搭建

什么是Node或NodeJS：

• node js是一门后端语言
  • JavaScript只能运行在浏览器中，因为浏览器中有他的解释器环境
  • 基于谷歌浏览器的v8引擎(js解释器)，使它能够运行在操作系统上

• npm -随着node的安装自动安装的

安装Node：

-官方地址：
	-http://nodejs.cn/   # 下载对应平台的nodejs解释器
 
-安装完成会有两个可执行文件
	node  # 类似python  进入node环境
	npm	  # 类似与pip  npm install 安装模块

创建Vue项目使用什么：

创建Vue项目可以使用的工具有两种：

• vue-cli：
  • 官网：https://cli.vuejs.org/zh/
  • 支持Vue2.x版本和Vue3.x版本
• vite：
  • 仅支持Vue3.x及以上版本
  • 效率非常高

二、Vue-cli

简介：

vue-cli 就是快速搭建一个 vue 项目的脚手架工具。

使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。

# 前端做成项目----》使用工具（vue-cli），创建出vue项目，单页面应用(spa)，组件化开发，  把 xx.vue，ts，saas，less-----》编译---》在浏览器中执行

# vue-cli创建项目开发，在项目中开发，最后上线，一定要编译--->纯粹的html，js，css

# 浏览器只能识别 js  html  css

# vue-cli 工具，使用nodejs写的，要运行，需要node环境

1、Vue-cli创建项目

安装Vue-cli：

方式一：
	# cmd 终端运行
	npm install -g @vue/cli  
    
方式二：
	# 使用cnpm替换npm（淘宝出的工具，下载速度快） 
	# -g 表示装全局
	# --registry=https://registry.npm.taobao.org 指定淘宝镜像
	npm install -g cnpm --registry=https://registry.npm.taobao.org
  	# 以后使用cnpm 代替npm
	cnpm install -g @vue/cli	

创建项目：

1、cmd控制台就可以输入vue命令

2、使用vue-cli创建项目(提前创建一个目录，用于存放vue项目)
	# 速度很慢，等，可以ctrl+c停止 执行npm cache clean --force
	# vue ui 使用图形化界面创建项目 ，自己点击即可
	vue create 项目名  

3、按图操作

2、项目目录介绍

运行项目：

• 使用pycharm找到刚才创建的项目，打开（运行的方式有两种）
  • 第一种：下方Terminal输入指令
    • npm run serve
  • 第二种：使用 pycharm ，点击绿色箭头执行

目录介绍：

# vue 项目目录介绍
vue_chi01      # 项目名
	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导入、导出语法

xxx.vue文件：

• 新建xxx.vue项目
• 发现xxx.vue中有三块内容
  • template：以后内容都写这里
  • style：控制标签的样式
  • script：编写JS代码的地方
    

main.js文件：

• import '别名' from '包的位置'
  • 用于导入包（页面组件）
• new Vue（{xxx}）
  • 用于注册页面组件和包
• Vue.'xxx'
  • 用于导入各种配置
    

1、导入、导出语法

简介：

从es6开始，js也支持包的导入和导出，类似于python一样导入各种模块

默认导入、导出语法：

# 导出语法：(一般是个对象)
	export default {'xxx':'bbb','zzz':'ccc'}
    
# 导入语法：
	import 别名 from '路径'  # 导入以后就使用别名

命名导入、导出语法：

# 导出语法：(可导出多个)
	export const name = '彭于晏'  # 属性
   	export const add = (a, b) => {
            console.log(name)
            return a + b
        }   # 函数（方法）
    
# 导入语法：
	import {name, add} from './aaa/bbb.vue'  # 后缀名可以省略
    console.log(name)
    console.log(add(33, 44))

四、Vue项目编写步骤

1、创建组件

views文件下创建xxx.vue（页面组件），components文件下创建的为小组件（给页面组件用的）

2、导出组件

在script标签中有一个export default配置，用于导出当前组件

3、注册组件

编写的页面组件、小组件需要在别的地方用到（例如小组件要在页面组件中使用）就需要在页面组件的script标签中导入小组件

4、使用

注册以后，被导入的组件就可以在当前页面（组件）中使用，写在template标签内

六、小练习

0、axios的使用（准备工作）

# 1、安装
	cnpm install axios -S    # 带着-S会自动把当前依赖加入到package.json中
    
# 2、导入
	import axios from 'axios'
 
# 3、导入模块后即可在script标签内中使用

1、登录功能

页面组件

登录组件（局部组件）

2、车的增删查

页面组件

局部组件(车型信息的增删查)

添加车型组件（嵌套车组件内部）

七、跨域问题的解决

安装模块

pip3.8 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/

注册app

'corsheaders'

注册中间件

'corsheaders.middleware.CorsMiddleware',

添加配置文件

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'
)