vue脚手架

1 vue脚手架的概念

Vue脚手架（Vue Scaffolding）是Vue.js**官方提供的一个工具，专门用于快速搭建单页面应用（SPA）的项目结构。它通过命令行界面（CLI）提供了一套标准化的开发流程，包括项目初始化、自动化构建、本地开发服务器、组件和插件支持等功能，帮助开发者更加专注于业务逻辑的实现，提高开发效率。12

Vue脚手架是一个集成了项目初始化、自动化构建、本地开发服务器、组件和插件支持等功能的工具，旨在帮助开发者快速搭建Vue.js项目，提高开发效率

2 vue脚手架的创建

2.1 vue脚手架的安装

-g 表示的全局安装

npm install -g @vue/cli

2.2 创建Vue脚手架工程

想把项目创建在哪里，就在哪里执行以下的命令

vue create xxx项目名

出现以下界面说明构建成功

进入项目执行命令运行程序

cd myvue
npm run serve

启动成功后出现

访问本地的http://localhost:8080/

关闭服务用Ctrl+C

2.3 Vue脚手架的文件结构说明

3 修改默认配置

在main.js中定义一个方法 info() 此方法没有调用 服务器启动报错

这样不方便开发

配置vue.config.js

添加：

lintOnSave:false

4 标签的 ref属性

4.1 ref介绍

可以通过ref获取Dom元素

js中是通过document.getElementById("id")获取Dom元素

在vue中可以使用ref来替换上面js获取Dom元素

应用在html标签上获取的是Dmo元素，应用在组件标签上的是组件实例对象(vc)

使用方法:

<h1 ref="xxx"></h1>或<组件 ref="xxx"></组件>
获取 :this.$refs.xxx

4.1示范

编写一个Person.vue组件，

<template>
    <div class="person">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>
</template>
<script>
export default {
    name:"Person",
    data(){
        return{
            name:"gqk",
            age:18
        }
    }
}
</script>
<style>
    .person{
        background-color: pink;
    }
</style>

在App.vue中引入

<template>
  <div id="app">
    <h1 ref="title">{{msg}}</h1>
    <button ref="btn" @click="showDom">点击输出Dom元素</button>
    <Person ref="person"></Person>
  </div>
</template>

<script>
import Person from './components/Person.vue' //导入Person.vue
export default {
  name: 'App',
  components: {
   Person
  },
  data(){
    return{
      msg:"欢迎来到java05班学习",
    }
  },
  methods:{
    showDom(){//通过ref获取dom元素或组件对象
      console.log(this.$refs.title)
      console.log(this.$refs.btn)
      console.log(this.$refs.person)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

点击按钮观察控制台

5 props配置

让组件接收外部传递过来的数据,从而达到组件复用的目的

Person.vue

<template>
    <div class="person">
        <h1>{{msg}}</h1>
        <h2>姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{age+1}}</h2>
    </div>
</template>
<script>
export default {
    name:"Person",
    data(){
        return{
           msg:"个人简介"
        }
    },
    props:['name','sex','age']

}
</script>
<style>
    .person{
        background-color: pink;
    }
</style>

App.vue

<template>
  <div id="app">
    <h1 ref="title">{{msg}}</h1>
    <button ref="btn" @click="showDom">点击输出Dom元素</button>
    <Person ref="person" name="gqk" sex="男" :age="18"></Person>
  </div>
</template>

<script>
import Person from './components/Person.vue' 
export default {
  name: 'App',
  components: {
   Person
  },
  data(){
    return{
      msg:"欢迎来到java05班学习",
    }
  },
  methods:{
    showDom(){
      console.log(this.$refs.title)
      console.log(this.$refs.btn)
      console.log(this.$refs.person)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

除了以上配置还可以配置参数的类型，默认值

   props:{
        name:{
            type:String,
            require:true,
            default:"老王"
        },
        age:String,
        sex:"男"

    }

6 mixin混入

6.1 局部混入

示范：

Person.vue中有一个方法

methods:{
    showInfo(){
        alert(this.name)
    }
}

<template>
    <div class="person">
        <h1>{{msg}}</h1>
        <h2 @click="showInfo">姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{age+1}}</h2>
    </div>
</template>
<script>
export default {
    name:"Person",
    data(){
        return{
           msg:"个人简介"
        }
    },
    props:{
        name:{
            type:String,
            require:true,
            default:"老王"
        },
        age:String,
        sex:"男"

    },
    methods:{
        showInfo(){
            alert(this.name)
        }
    }
}
</script>
<style>
    .person{
        background-color: pink;
    }
</style>

Student.vue中也有一个

methods:{
    showInfo(){
        alert(this.name)
    }
}

<template>
    <div class="stu">
        <h2 @click="showInfo">学生姓名：{{name}}</h2>
        <h2>学生简介：{{info}}</h2>
    </div>
</template>
<script>
export default {
    name:"Stu",
    data(){
        return{
            name:"姜萌",
            info:"java05班学生"
        }
    },
    methods:{
        showInfo(){
            alert(this.name)
        }
    }
}
</script>
<style>

    .stu{
        background-color: green;
    }

</style>

当组件中有相同方法的时候可以对其进行抽取出来（一个公共的js代码）重复使用

在根目录下创建一个mixin.js

export const hunhe={
    methods:{
        showInfo(){
            alert(this.name)
        }
    }
}

在模块中使用（Student.vue）

<template>
    <div class="stu">
        <h2 @click="showInfo">学生姓名：{{name}}</h2>
        <h2>学生简介：{{info}}</h2>
    </div>
</template>
<script>
import { hunhe } from '@/mixin';
export default {
    name:"Stu",
    data(){
        return{
            name:"姜萌",
            info:"java05班学生"
        }
    },
    mixins:[hunhe]
  
}
</script>
<style>

    .stu{
        background-color: green;
    }

</style>

6.2 全局混入

导入一次可在所有组件中使用混入文件。

在main.js中添加全局混入

import Vue from 'vue'
import App from './App.vue'
import { hunhe } from './mixin'
Vue.config.productionTip = false
Vue.mixin(hunhe)
new Vue({
  render: h => h(App),
}).$mount('#app')

7 插件

功能:用于增强Vue
本质：包含install方法的一个对象，install的第一个参数就是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件

	对象.install=function(Vue,options){
		
		//1.添加全局过滤器
		Vue.filter(...)
		
		//2.添加全局指令
		Vue.directive(...)
		
		//3.配置全局混入
		Vue.minxin(...)

		//4.添加实例方法
		Vue.prototype.xxx=function(){
		  .....
		}
		Vue.prototype.xxx=(...)=>{
		 ......
		}

    }

创建一个plugins.js文件

export default{
    install(Vue,x,y,z){
        console.info("x: "+x)
        console.info("y: "+y)
        console.info("z: "+z)
        //全局过滤器
        Vue.filter('mySlice',function(value){
            console.log(x+y+z)
            return value.slice(0,4)
        })
        //全局混入
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:100
                }
            }
        })
        //给Vue原型上添加方法
        Vue.prototype.hello=()=>{
            alert("Hello Vue");
        }

    }
}

在main.js中使用插件

import plugins from './plugins'
//使用插件
Vue.use(plugins,1,2,3)

在vue中可以调用方法

<template>
    <div class="stu">
        <h2 >学生姓名：{{name}}{{x}}{{y}}</h2>
        <h2>学生简介：{{info|mySlice}}</h2>
        <h2 @click="hello">学生说</h2>
    </div>
</template>
<script>
export default {
    name:"Stu",
    data(){
        return{
            name:"姜萌",
            info:"java05班学生"
        }
    },
}
</script>

8 反向代理

在解决ajax跨域问题时，后端人员经常会配置CORS解决跨域，但是作为前端，我们也可以通过自己的反向代理的方式解决跨域，这样就不用麻烦后端开发人员。

先启动后端服务器：

启动成功后：

编写axios 前提下载安装axios（npm i axios）

<template>
    <div>
        <button @click="getStuList">查询全部学生</button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"Stu",
    methods:{
        getStuList(){//发送ajax请求
            axios.get("http://localhost:5000/students").then(
                response=>{
                    console.log("请求成功...",response.data);
                },
                error=>{
                    console.log("请求失败...",error.message)
                }
            )
        }
    }
}
</script>
<style>

</style>

直接请求报错（跨域问题）

会发现，产生了跨域问题，接下来我们用以下两种方式解决跨域

8.1 方式一

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

将原请求路径更改为以下

   getStuList(){//发送ajax请求
            axios.get("http://localhost:8080/students").then(
                response=>{
                    console.log("请求成功...",response.data);
                },
                error=>{
                    console.log("请求失败...",error.message)
                }
            )
        }

8.2 方式二

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象

配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // devServer:{
  //   proxy:"http://localhost:5000"
  // }
  devServer: {
    proxy: {
      '/stu': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true,
        pathRewrite:{"^/stu":""}
      },
      '/car': {
        target: 'http://localhost:5001',
        changeOrigin: true,
        pathRewrite:{"^/car":""}
      }
    }
  }
})

发送axios

<template>
    <div>
        <button @click="getStuList">查询全部学生</button>
        <button @click="getCarList">查询汽车信息</button>
    </div>
   
</template>
<script>
import axios from 'axios'
export default {
    name:"Stu",
    methods:{
        getStuList(){//发送ajax请求
            axios.get("http://localhost:8080/stu/students").then(
                response=>{
                    console.log("请求成功...",response.data);
                },
                error=>{
                    console.log("请求失败...",error.message)
                }
            )
        },
        getCarList(){//发送ajax请求
            axios.get("http://localhost:8080/car/cars").then(
                response=>{
                    console.log("请求成功...",response.data);
                },
                error=>{
                    console.log("请求失败...",error.message)
                }
            )
        },
    }
}
</script>
<style>

</style>

9 路由

9.1 路由简介

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

9.1 路由的简单使用

安装vue-router

注意，在2022年2月7日以后，vue-router的默认版本为4版本，并且：Vue-router3才能再Vue2中使用

npm i vue-router@3

使用vue-router

创建一个叫router的文件夹，并创建index.js,我们创建并暴露一个路由器VueRouter

import VueRouter from 'vue-router'
export default new VueRouter({
    routes:[
    ]
})

main.js中引入VueRouter并use，然后配置router

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/index'
Vue.config.productionTip = false

Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

src下创建views

准备两个组件：Stu.vue|Class.vue

<template>
    <div>
        <h2>我是Stu内容</h2>
    </div>
</template>
<script>
export default {
    name:"Stu",
}
</script>
<style>

</style>

<template>
    <div>
        <h2>我是Class内容</h2>
    </div>
</template>
<script>
export default {
    name:"Class"
}
</script>
<style>

</style>

路由器中配置路由数组routes 它里面包含很多路由。

import VueRouter from 'vue-router'
import Stu from '../views/Stu'
import Class from '../views/Class'
export default new VueRouter({
    routes:[
        {
            path:"/stu",
            component:Stu
        },{
            path:"/class",
            component:Class
        }
    ]
})

App.vue使用路由

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
        <!-- 指定组件存放的位置 -->
      <router-view></router-view>
    </div>
    <router-link class="test" active-class="active" to="/stu">学生管理</router-link>
    <router-link class="test" active-class="active" to="/class">班级管理</router-link>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  background-color: skyblue;
  height: 100px;
  width: 150px;
  display: inline-block;
  margin-left: 20px;
  line-height: 100px;
  text-decoration: none;
}
.active{
  background-color: red;
}
</style>

点击学生管理，显示我是Stu内容，点击班级管理显示我是Class内容（局部刷新的）