vue-cli创建项目
前端工程化，项目>>>(vue-cli)，创建处vue项目,单页面应用(spa)
vue-cli创建项目开发，在项目中开发，最后上线，一定要编译
'纯粹的html，js，css'
vue-cli工具由于是nodejs编写的，所以我们需要node安装环境1.下载node解释器
官网下载对应平台的nodejs解释器，一路下一步
-安装后会自动添加环境变量：可执行文件路径 就在环境变量
-下载完成后我们打开cmd，就可以运行node，他的使用和安装模块的命令，类似python的两个命令（这两个命令来自两个可执行文件）：
-node： 类似cmd中python命令
-npm： 类似cmd中的pip命令
nodejs官网:http://nodejs.cn/
vue-cli项目创建
vue版本不同可以使用不同的项目脚手架
2.x 使用vue-cli ：https://cli.vuejs.org/zh/
3.x 使用vue-cli
3.x版本的vue项目还可以使用vite创建，vite 效率非常高，但不支持2.x版本的vue项目
1.安装cnpm工具
- 我们的nodejs自带的npm工具，npm会从国外的站点下载，速度慢
- cnpm是淘宝出的工具，下载的时候，去淘宝镜像下载，速度快，
- 以后使用cnpm 代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装脚手架(vue-cli)cnpm install -g @vue/cli
-g表示全局（全局变量）
安装完成后，cmd控制台就可以输入 vue 命令了（类似装了djagno可以使用django-admin创建django项目
- 如果遇到速度特别慢的情况，可以使用 清空缓存处理（如果安装失败，需要执行清除缓存，再重新安装，创建项目时也是一样的流程）
npm cache clean --force
3.使用vue-cli创建项目
- 在输入命令执行之前需要自行选择创建项目的路径
- 速度可能会很慢，可以等，也可以ctrl+c停止（停止后如果需要重新创建，需要执行npm cache clean --force）
- 很慢的原因：
1.因为vue-cli需要很多依赖(下载的东西比较多)
2.需要从github上拉空项目
输入命令:vue create myfirstvue
如果出现上图情况，y继续即可
执行命令结束会进入到选择界面
- 上下键进行选择，回车键确定
- 这里我们选择最后一个选项，前面两个默认选项由于使用了eslint会对代码进行格式化，比如我们如果漏写了分号，会报错，但是运行的时候其实并不影响
- 如果我们之前选择自定义并且进行了保存，这里也会展示出来的
配置选择
- 选择vue版本
- 历史模式选择
- 选择项目依赖安装位置
- 是否保存当前配置
- 输入保存后名称
- 创建成功如下图所示
vue项目目录介绍
# vue 项目目录介绍
myfirstvue # 项目名
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
# 不用动，安装了第三方模块，它自动增加
# 内部的信息中有name属性，这就是我们项目的名称，项目启动后可以在浏览器的上方看到
# name属性的下方，还有一个scripts属性，内部有一个serve键值对，这个serve就是对应：npm run serve中的serve的，如果我们在这里进行了更改，启动项目的命令也需要更改
# 下方的dependencies中配置了项目所需模块的版本信息，版本前面的‘^’号表示的是可以往更高版本兼容，但实际使用的时候通常不这么设置（高版本容易出兼容性问题）
package-lock.json # 锁定文件，忽略掉
README.md # 用户手册
vue.config.js # vue的配置文件
es6导入导出语法
App.vue,main.js是什么
### 看xx.vue 组件学到的重点#########
# 记住，以后开发vue项目，都按照这个模式来
1 新建xx.vue(创建新的组件页面组件)
2 在xx.vue中就三块内容
#1 以后组件的html内容，都写在这里
#2 以后该组件使用的样式，都写在这
# 3 以后js的东西，都写在这
#### main.js 学到的
# 找到index.html 中的id为app的div，以后都在App.vue中写（相当于我们之前在html中编写vue时的el属性）
new Vue({
render: h => h(App)
}).$mount('#app')
- python中创建包，可以在其他py文件中导入
- js 从es6开始，也支持包的导入和导出
- 我们编写下方的代码时需要创建一个文件夹，在文件夹内创建一个js文件，在他的内部编写vue代码，为了使这个代码生效我们需要在main.js中进行导入
默认导出语法(使用的多)
-导出语法
export default 一般是个对象
-导入语法
import 别名 from '路径'
以后 别名 就是 导出的对象
命名导入导出语法(了解)
命名导出语法可以写多个，这样就可以导出多个变量
导出的导入的时候需要用大括号包裹导入的变量，并用逗号隔开，需要什么变量就导入什么变量
ps：导出的时候需要注意，const定义的导出的变量名不能跟前面代码中的变量名重复，会报错
导入的简写形式
- 包下的 index.js 导入的时候，不用具体到index.js的路径
- 它等同于ptyhon的init.py
-例如：
# 包是
xiaoming
-index.js
#导入的时候
import xiaoming from './xiaoming'
vue项目编写步骤
# 1 以后只需要写xx.vue
-页面组件（views文件夹内创建）
-小组件 给页面组件用的（components文件夹内创建）
# 2 组件中导出
'HelloWorld.vue组件导出后，导入到HomeView.vue组件中(小组件导入到页面组件中)'
'如果组件内部定义了变量需要用data来接收，但是要写成方法return值'
export default {
name: 'HelloWorld',
data() {
return {
xx: '彭于晏'
}
},
props: {
msg: String
}
}
'如果外面有自定义属性就需要用props来接收'
"Welcome to Your Vue.js App"/>
# 3 组件如果要在别的组件中使用，需要导入、注册
'这里也是以HelloWorld.vue组件导入到HomeView.vue组件中为例子'
# 导入
import HelloWorld from '@/components/HelloWorld.vue'
# 这里的@符号就是指代src文件夹
import HelloWorld from '../components/HelloWorld.vue'
# 注册
export default {
components: {
HelloWorld
}
}
# 4 注册以后，在这个组件中就可以使用导入的组件 ，写在
# 自定义属性
'可以写但个标签，也可以写两个标签进行包裹，包裹后内部可以用更多的操作，比如插值语法'
"传进来的p"/>
props配置项
props配置项在里面写接受父传子自定义的属性
# props配置项有三种写法:
-1 数组写法
-2 对象对象写法
-3 对象套对象写法
# 写法总结
# 方式一：使用数组
props: ['msg'],
# 方式二：使用对象
props: {msg: String}, // 属性验证
# 方式三：使用对象，指定类型、默认值和必填
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
props使用
- 新建组件child.vue
- 在根组件app中引入child.vue,并注册(在components中)
- 根组件可以通过自定属性进行父传子(可以写多个自定义属性)
- 子组件通过props配置项接收数据(数组写法/对象写法)
- 可以进行属性的验证,虽然会在前端控制台报错(不影响正常显示)
Mixin混入
# mixin(混入) 可以把多个组件共用的配置提取成一个混入对象
-把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用
# 使用步骤
-1 定义混入对象，新建mixin包，下新建index.js
-2 在 index.js中写代码（组件中会用到的，比如data，methods、配置项）
export const hunhe = {
data() {
return {
name: '彭于晏'
}
},
methods: {
handlePrintName() {
alert(this.name)
}
},
}
-3 局部导入：在组件中
import {hunhe} from "@/mixin";
# 配置项：
mixins:[hunhe,]
-4 全局使用，在main.js 中 以后所有组件都可以用
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)
// Vue.mixin(lqz2) 多个混入需要注册多次
// Vue.mixin(lqz3)
-5 在组件中，直接使用即可
局部使用mixins
- 新建组件并将其导入到根组件中
- 编写根组件代码/编写子组件代码
- 根组件和子组件有相同的(数据/方法)
- 在src目录下新建mixin文件夹并且在其中新建index.js编写相同的(数据/方法)
- 我们就可以在子组件/父组件 中配置项配置mixin，导入共同拥有的(数据/方法)
注意：如上示例中，混入导入的和methods中的函数都是同一个名字。
直接说结论：先使用methods中的函数，如果在methods中找不到，再用mixins的。
扩展：
混入不仅仅可以抽取methods中的函数，还可以抽取data()数据。
查找顺序和之前的一样，先使用组件自己的数据，如果没有数据，再去mixins中找数据。
create()这种生命周期钩子函数也可以抽取到mixins。
全局引用mixin
需要在main.js中导入mixin包：
全局引入之后，相当于在所有组件中都加入了mixins配置项，所有组件就都可以使用混入的函数和数据了。
mixins具体使用情景:
比如有一个记录用户浏览记录的功能，通过引入mxins，可以实现在每个组件都可以使用这个功能。
插件
# 功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
- elementui相当于是Vue的插件
# 使用步骤
-新建包plugins，新建index.js
import Vue from "vue";
import axios from "axios";
import {hunhe} from '@/mixin'
export default {
install(miVue) {
// console.log(miVue)
// 1 vue 实例上放个变量
// Vue.prototype.$name = 'lqz' // 类比python，在类上放了一个属性，所有对象都能取到
// Vue.prototype.$ajax = axios
// 2 使用插件，加入混入
// 全局使用混入
// Vue.mixin(hunhe)
// 3 定义全局组件
// 4 定义自定义指令 v-lqz
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
}
}
2 在main.js 中使用插件
import plugins from '@/plugins'
Vue.use(plugins) // 本子，使用use，会自动触发插件对象中得install
3 以后再组件中可以直接用插件中写的东西
# 插件可以做的事：
1 了解，自定义指令(不了解没关系)
2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax 就是axios对象
3 使用全局混入
4 自定义全局组件
使用插件给Vue对象添加属性
- 在src目录中新建plugings文件夹，并且新建index.js文件在其中
- 在index.js文件中编写代码
插件是包含install方法的一个对象。如上图我们在index.js导出这个对象。install方法的第一个参数是Vue实例，第二个以后的参数是插件使用者传递的数据
需求：在Vue实例上存放一个变量，在任意位置通过this.变量名就可以获取到这个变量的数据。（本质上增强了Vue的功能）
导入Vue，这里的Vue是源码中的Vue构造函数（把他当作python中的类）
在Vue类上存放了一个属性$name，以后Vue类产生的对象，都可以拿到这个属性。
使用插件，在main.js中导入插件
并且使用对插件使用Vue.use()，相当于自动触发插件对象中的install方法。Vue.use()会给自动插件的第一个参数传入Vue构造方法（相当于python中的类）。
还可以给插件传更多的参数如：Vue.use(plugins, 1, '你好')
在插件中接收参数
在根组件里打印this：
这个this是当前的组件对象。查看控制台，发现并没有我们添加的$name属性。
那到底如何使用插件，给Vue对象添加属性呢？使用原型prototype。
修改插件代码：
这里有个类似python中属性查找属性的问题。我们使用Vue.prototype.$name='lqz'将属性放入prototype。Vue对象查找属性时，会先在自己身上找，如果找不到，就会去prototype找$name属性。prototype类比python中的类。
使用插件引入axios：
这样写，在任意页面都可以通过this.$ajax直接使用axios，不用每次使用都导入了
为什么属性的名字前，都需要加一个$?
防止和组件内部的属性名冲突。
插件配合混入
之前我们是在main.js使用Vue.mixin()实现全局混入。
通过插件实现全局混入：
也相当于所有组件都添加了mixin配置项。
在插件定义全局组件
elementui插件定义很多全局组件，我们可以直接使用：
scoped
# 父组件写了style，子组件都会使用父组件的style
如果在根组件中写了样式，会在所有页面组件都生效，这样不太好，所有需要使用scoped。
# 父组件的样式，在子组件中会生效，在style上写 让该样式只在当前组件中生效
# 示例
localStorage和sessionStorage
# 是window浏览器对象(BOM)有的东西
localStorage和sessionStorage和Vue没有必然联系。
# 如果想在浏览器中存储数据：
有三个地方：
1.永久存储：localStorage 不登录加购物车，没登录 搜索过的商品
2.临时存储：sessionStorage 关闭页面数据就没了
3.设定一个时间，到时候就过期：cookie
# 补充：序列化和反序列化
// 对象转json字符串
// JSON.stringify(person)
// json字符串转对象
// JSON.parse()
# 都是在浏览器存储数据的--》存数据有什么用？
-登录成功 token存在本地
-不登录加入购物车功能，迪卡侬存在了localStorage中
-组件间通信----》 跨组件
# localStorage
-永久存储，除非清空缓存，手动删除，代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
# sessionStorage
-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
# cookie
-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')
cookies操作
# 安装Vue cookies第三方插件：
cnpm install vue-cookies -S
# 导入：
import cookies from 'vue-cookies'
localStorage操作
sessionStorage操作
cookie操作
element-ui
# 在vue上，css样式，用的最多的是elementui，但是还有其他的
-elementui 做网页端 样式用的多 vue2的 饿了吗团队开发的
-elementui-plus 第三方团队继续基于vue3写的
-vant 做app的样式 基于Vue3
-iview pc端用www.iviewui.com 基于Vue3
element-ui使用
# 使用步骤
1 安装
cnpm i element-ui -S
2- 在main.js中引入插件
- 完整引入 （导致项目过大）
- 按需引入 （专业前端）
2.1 配置完整引入 在 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI) // 以后在咱们组件中直接使用elementui提供的全局组件即可
3 在组件中使用
-去官网看到好的，复制贴到你的项目中
练习
1.创建vue项目
使用导入导出语法，把 登录功能的发送请求，抽取到一个包中
- 对项目文件中的的路由部分进行配置
# loginView组件页面
class="top">登录页面
用户名:<input type="text">
密码:<input type="text">
- 我们需要绑定给按钮点击事件，给后端发送登录请求..
后端部分编写(django-drf)
因为我们等下会用到django的 authuser表
所以需要我们在 settings文件中配置
AUTH_USER_MODEL = 'app01.UserInfo'
数据库部分我们使用默认的即可
INSTALLED_APPS = [
...
'rest_framework' #需要注册app进行使用Drf
]
在model层创建表
from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class UserInfo(AbstractUser):
mobile = models.CharField(max_length=32,null=True)
class CarModel(models.Model):
name = models.CharField(max_length=32)
price = models.CharField(max_length=32)
car_factory = models.ForeignKey(to='CarFactory',on_delete=models.CASCADE)
distributors = models.ManyToManyField(to='Distributors')
class CarFactory(models.Model):
name = models.CharField(max_length=32)
addr = models.CharField(max_length=32)
phone = models.CharField(max_length=32)
class Distributors(models.Model):
name = models.CharField(max_length=32)
phone = models.CharField(max_length=32)
addr = models.CharField(max_length=32)
- 终端中进行 makemigrations,migrate数据库迁移操作
- 创建超级管理员
create superuser - 填充数据
- 编写视图函数(登录功能)
from rest_framework.viewsets import ModelViewSet, ViewSetMixin
from rest_framework.generics import CreateAPIView
from .models import CarModel, UserInfo, CarFactory, Distributor
from .serializer import UserSerializer, CarFactorySerializer, CarModelSerializer, DistributorSerializer
from rest_framework.response import Response
from rest_framework_jwt.settings import api_settings
from django.contrib import auth
jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER
class UserView(ViewSetMixin, CreateAPIView):
# queryset = UserInfo.objects.all()
# serializer_class = UserSerializer
def login(self, request, *args, **kwargs):
username = request.data.get('username')
password = request.data.get('password')
user_obj = auth.authenticate(request,username=username,password=password)
if user_obj:
payload = jwt_payload_handler(user_obj)
# 通过payload得到token
token = jwt_encode_handler(payload)
return Response({
'code': 100,
'msg': '登录成功',
'token': token,
'username': user_obj.username,
'url': ''
})
return Response({'msg': '用户名或密码错误', 'code': 101})
class CarModelView(ModelViewSet):
queryset = CarModel.objects.all()
serializer_class = CarModelSerializer
class CarFactoryView(ModelViewSet):
queryset = CarFactory.objects.all()
serializer_class = CarFactorySerializer
class DistributorView(ModelViewSet):
queryset = Distributor.objects.all()
serializer_class = DistributorSerializer
路由层：
from django.contrib import admin
from django.urls import path, include
from app01 import views
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register('car_factory', views.CarFactoryView, 'car_factory')
router.register('car_model', views.CarModelView, 'car_model')
router.register('distributor', views.DistributorView, 'distributor')
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.UserView.as_view({'post':"login"})),
path('user/', include(router.urls)),
]
序列化类:
from rest_framework.serializers import ModelSerializer
from .models import CarModel, UserInfo,CarFactory,Distributor
class UserSerializer(ModelSerializer):
class Meta:
model = UserInfo
fields = "__all__"
class CarModelSerializer(ModelSerializer):
class Meta:
model = CarModel
fields = ['name','price','distributors','car_factory','distributor_list','car_factory_detail','id']
extra_kwargs = {
'distributors': {"write_only": True},
'car_factory': {"write_only": True},
}
class CarFactorySerializer(ModelSerializer):
class Meta:
model = CarFactory
fields = '__all__'
class DistributorSerializer(ModelSerializer):
class Meta:
model = Distributor
fields = '__all__'
- 后端代码编写完后我们在回到前端部分
- 绑定给button按钮点击事件,向后端发送post请求
登录页面
用户名:
密码:
前端代码修改
效果：
我们可以将登录功能抽取出来，放到src下面的文件夹中
- 新建文件夹method,并创建js文件index
- 在index文件中编写代码
import axios from "axios"// 这里必须导入axios,因为别的包会直接调用下面的函数，而下面的函数需要使用这个axios
// 默认导出
export default {
handleLogin() {
axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(
res => {
if (res.data.code === 100) {
console.log(res.data)
this.token = res.data.token
} else {
alert(res.data.msg)
}
}
)
}
}
export const ajaxfunc = function handleLogin () { // 这里如果使用匿名函数,由于匿名函数没有this,在别的组件中使用会导致获取不了数据。
axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(
res => {
if (res.data.code === 100) {
console.log(res.data)
this.token = res.data.token
} else {
alert(res.data.msg)
}
}
)
}
2.创建一个组件，显示一张图片，图片地址通过父组件传入 aboutView 中使用这个组件
![]()
父传子图片
3. 在图片页组件，加一个button，点击把图片地址显示在父组件中 （子传父）
父传子图片
子传父图片
![]()
![]()
__EOF__
