vue脚手架

  • vue脚手架已关闭评论
  • 41 次浏览
  • A+
所属分类：Web前端
摘要

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

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项目名

vue脚手架

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

vue脚手架vue脚手架

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

cd myvue npm run serve

启动成功后出现

vue脚手架

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

vue脚手架

关闭服务用Ctrl+C

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

vue脚手架

3 修改默认配置

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

这样不方便开发

vue脚手架

配置vue.config.js

添加：

lintOnSave:false

vue脚手架

vue脚手架

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>

点击按钮观察控制台

vue脚手架

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>

vue脚手架

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

   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解决跨域，但是作为前端，我们也可以通过自己的反向代理的方式解决跨域，这样就不用麻烦后端开发人员。

先启动后端服务器：

vue脚手架

启动成功后：

vue脚手架

编写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>

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

vue脚手架

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

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

vue脚手架

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>

vue脚手架

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" alt="vue脚手架">     <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内容（局部刷新的）

vue脚手架

便宜好用的国外VPS推荐