vue脚手架

vue脚手架

1 vue脚手架的概念

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

2.1 vue脚手架的安装

-g 表示的全局安装

1. npm install -g @vue/cli

复制代码

2.2 创建Vue脚手架工程

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

1. vue create xxx项目名

复制代码

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

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

1. cd myvue
2. npm run serve

复制代码

启动成功后出现

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

关闭服务用Ctrl+C
2.3 Vue脚手架的文件结构说明

3 修改默认配置

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

配置vue.config.js
添加：

1. lintOnSave:false

复制代码

4 标签的 ref属性

4.1 ref介绍

可以通过ref获取Dom元素
js中是通过document.getElementById("id")获取Dom元素
在vue中可以使用ref来替换上面js获取Dom元素
应用在html标签上获取的是Dmo元素，应用在组件标签上的是组件实例对象(vc)
使用方法:

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

复制代码

4.1示范

编写一个Person.vue组件，

1. <template>
2.    
3.         <h1>姓名：{{name}}</h1>
4.         <h1>年龄：{{age}}</h1>
5.    
6. </template>

复制代码

在App.vue中引入

1. <template>
2.   
3.     <h1 ref="title">{{msg}}</h1>
4.     <button ref="btn" @click="showDom">点击输出Dom元素</button>
5.     <Person ref="person"></Person>
6.   
7. </template>

复制代码

点击按钮观察控制台

5 props配置

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

1. <template>
2.    
3.         <h1>{{msg}}</h1>
4.         <h2>姓名：{{name}}</h2>
5.         <h2>性别：{{sex}}</h2>
6.         <h2>年龄：{{age+1}}</h2>
7.    
8. </template>

复制代码

App.vue

1. <template>
2.   
3.     <h1 ref="title">{{msg}}</h1>
4.     <button ref="btn" @click="showDom">点击输出Dom元素</button>
5.     <Person ref="person"></Person>
6.   
7. </template>

复制代码

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

1.    props:{
2.         name:{
3.             type:String,
4.             require:true,
5.             default:"老王"
6.         },
7.         age:String,
8.         sex:"男"
10.     }

复制代码

6 mixin混入

6.1 局部混入

示范：
Person.vue中有一个方法

1. methods:{
2.     showInfo(){
3.         alert(this.name)
4.     }
5. }

复制代码

1. <template>
2.    
3.         <h1>{{msg}}</h1>
4.         <h2>姓名：{{name}}</h2>
5.         <h2>性别：{{sex}}</h2>
6.         <h2>年龄：{{age+1}}</h2>
7.    
8. </template>

复制代码

Student.vue中也有一个

1. methods:{
2.     showInfo(){
3.         alert(this.name)
4.     }
5. }

复制代码

1. <template>
2.    
3.         <h2 @click="showInfo">学生姓名：{{name}}</h2>
4.         <h2>学生简介：{{info}}</h2>
5.    
6. </template>

复制代码

当组件中有相同方法的时候可以对其进行抽取出来（一个公共的js代码）重复使用
在根目录下创建一个mixin.js

1. export const hunhe={
2.     methods:{
3.         showInfo(){
4.             alert(this.name)
5.         }
6.     }
7. }

复制代码

在模块中使用（Student.vue）

1. <template>
2.    
3.         <h2 @click="showInfo">学生姓名：{{name}}</h2>
4.         <h2>学生简介：{{info}}</h2>
5.    
6. </template>

复制代码

6.2 全局混入

导入一次可在所有组件中使用混入文件。
在main.js中添加全局混入

1. import Vue from 'vue'
2. import App from './App.vue'
3. import { hunhe } from './mixin'
4. Vue.config.productionTip = false
5. Vue.mixin(hunhe)
6. new Vue({
7.   render: h => h(App),
8. }).$mount('#app')

复制代码

7 插件

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

1.         对象.install=function(Vue,options){
2.                
3.                 //1.添加全局过滤器
4.                 Vue.filter(...)
5.                
6.                 //2.添加全局指令
7.                 Vue.directive(...)
8.                
9.                 //3.配置全局混入
10.                 Vue.minxin(...)
12.                 //4.添加实例方法
13.                 Vue.prototype.xxx=function(){
14.                   .....
15.                 }
16.                 Vue.prototype.xxx=(...)=>{
17.                  ......
18.                 }
20.     }

复制代码

创建一个plugins.js文件

1. export default{
2.     install(Vue,x,y,z){
3.         console.info("x: "+x)
4.         console.info("y: "+y)
5.         console.info("z: "+z)
6.         //全局过滤器
7.         Vue.filter('mySlice',function(value){
8.             console.log(x+y+z)
9.             return value.slice(0,4)
10.         })
11.         //全局混入
12.         Vue.mixin({
13.             data(){
14.                 return{
15.                     x:100,
16.                     y:100
17.                 }
18.             }
19.         })
20.         //给Vue原型上添加方法
21.         Vue.prototype.hello=()=>{
22.             alert("Hello Vue");
23.         }
25.     }
26. }

复制代码

在main.js中使用插件

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

复制代码

在vue中可以调用方法

1. <template>
2.    
3.         <h2 >学生姓名：{{name}}{{x}}{{y}}</h2>
4.         <h2>学生简介：{{info|mySlice}}</h2>
5.         <h2 @click="hello">学生说</h2>
6.    
7. </template>

复制代码

8 反向代理

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

启动成功后：

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

1. <template>
2.    
3.         <button @click="getStuList">查询全部学生</button>
4.    
5. </template>

复制代码

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

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

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

1. module.exports = {
2.   devServer: {
3.     proxy: 'http://localhost:5000'
4.   }
5. }

复制代码

将原请求路径更改为以下

1.    getStuList(){//发送ajax请求
2.             axios.get("http://localhost:8080/students").then(
3.                 response=>{
4.                     console.log("请求成功...",response.data);
5.                 },
6.                 error=>{
7.                     console.log("请求失败...",error.message)
8.                 }
9.             )
10.         }

复制代码

8.2 方式二

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

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   lintOnSave:false,
5.   // devServer:{
6.   //   proxy:"http://localhost:5000"
7.   // }
8.   devServer: {
9.     proxy: {
10.       '/stu': {
11.         target: 'http://localhost:5000',
12.         ws: true,
13.         changeOrigin: true,
14.         pathRewrite:{"^/stu":""}
15.       },
16.       '/car': {
17.         target: 'http://localhost:5001',
18.         changeOrigin: true,
19.         pathRewrite:{"^/car":""}
20.       }
21.     }
22.   }
23. })

复制代码

发送axios

1. <template>
2.    
3.         <button @click="getStuList">查询全部学生</button>
4.    
5. </template>    查询汽车信息      

复制代码

9 路由

9.1 路由简介

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。
然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
9.1 路由的简单使用

安装vue-router

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

1. npm i vue-router@3

复制代码

使用vue-router

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

1. import VueRouter from 'vue-router'
2. export default new VueRouter({
3.     routes:[
4.     ]
5. })

复制代码

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

1. import Vue from 'vue'
2. import App from './App.vue'
3. import VueRouter from 'vue-router'
4. import router from './router/index'
5. Vue.config.productionTip = false
7. Vue.use(VueRouter)
8. new Vue({
9.   render: h => h(App),
10.   router:router
11. }).$mount('#app')

复制代码

src下创建views
准备两个组件：Stu.vue|Class.vue

1. <template>
2.    
3.         <h2>我是Stu内容</h2>
4.    
5. </template>

复制代码

1. <template>
2.    
3.         <h2>我是Class内容</h2>
4.    
5. </template>

复制代码

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

1. import VueRouter from 'vue-router'
2. import Stu from '../views/Stu'
3. import Class from '../views/Class'
4. export default new VueRouter({
5.     routes:[
6.         {
7.             path:"/stu",
8.             component:Stu
9.         },{
10.             path:"/class",
11.             component:Class
12.         }
13.     ]
14. })

复制代码

App.vue使用路由

1. <template>
2.   
3.     <img alt="Vue logo" src="https://www.cnblogs.com/./assets/logo.png">
4.    
5.         
6.       <router-view></router-view>
7.    
8.     <router-link  active- to="/stu">学生管理</router-link>
9.     <router-link  active- to="/class">班级管理</router-link>
10.   
11. </template>

复制代码

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！