Vue急速入门-5

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版本

• 历史模式选择

• 选择项目依赖安装位置

• 是否保存当前配置

• 输入保存后名称

• 创建成功如下图所示

博客参考:https://www.cnblogs.com/zhihuanzzh/p/17137995.html

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来接收'
    

# 3 组件如果要在别的组件中使用，需要导入、注册
    '这里也是以HelloWorld.vue组件导入到HomeView.vue组件中为例子'
    # 导入
    import HelloWorld from '@/components/HelloWorld.vue'
    # 这里的@符号就是指代src文件夹
    import HelloWorld from '../components/HelloWorld.vue'
    # 注册
    export default {
      components: {
        HelloWorld 
      }
    }
 # 4 注册以后，在这个组件中就可以使用导入的组件 ，写在

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'

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组件页面

• 我们需要绑定给按钮点击事件，给后端发送登录请求..

后端部分编写(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，点击把图片地址显示在父组件中 （子传父）