Vue全家桶

最新推荐文章于 2024-07-25 09:37:37 发布
最新推荐文章于 2024-07-25 09:37:37 发布
阅读量242 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49031153/article/details/121023422
版权

Vue全家桶

内容回顾：

1 Vue的基本语法

2 为什么要前后端分离开发？前后端分离开发的优势和劣势？

  • 让专业的人做专业的事情
  • 优势：分工明确，各司其职
  • 劣质：前后端联调需要消耗比较多的时间

3 什么情况下会引起跨域？

  • 域名不同
  • 子域名不同
  • 端口不同
  • 协议不同
  • 域名和ip地址

4 跨域不一定会产生跨域问题？特殊情况：script和img

5 为什么会有跨域问题？

  • 浏览器的同源策略，从安全角度考虑， 阻止跨站攻击

6 跨域的解决方案有哪些？

  • jsonp：可以解决跨域，但是只能接收get请求
  • nginx：通过配置文件解决跨域
  • cors：是w3c的标准，需要浏览器端和服务器端同时支持，IE10+以上的浏览器都支持，服务器做配置

课程目标：

1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景

2 能够使用Vue全家桶进行项目开发

0 前置知识-ES6模块化

0.1 目标

  1. 能够说出模块化的概念
  2. 能够使用export关键字和import关键字

0.2 路径

  1. 什么是模块化
  2. export关键字的用法
  3. import关键字的用法
  4. 备注：此处的代码暂时无法执行，待本章课程内容学习完，就可以运行

0.3 体验

0.1.1 什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个类，必须先导包。

而JS中没有包的概念，换来的是 模块。

模块功能主要由两个命令构成：export和import。

  • export命令用于定义模块的对外接口，
  • import命令用于导入其他模块提供的功能。

0.1.2 export

比如我定义一个js文件:hello.js，里面有一个对象：

const util = {
    sum(a,b){
        return a + b;
    }
}

我可以使用export将这个对象导出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

当然，也可以简写为：

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

当要导出多个值时，还可以简写。比如我有一个文件：user.js：

var name = "jack"
var age = 21
export {name,age}

省略名称

上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

因此js提供了default关键字，可以对导出的变量名进行省略

例如：

// 无需声明对象的名字
export default {
	sum(a,b){
        return a + b;
    }
}

这样，当使用者导入时，可以任意起名字

0.1.3 import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

例如我要使用上面导出的util：

// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)

要批量导入前面导出的name和age：

import {name, age} from 'user.js'

console.log(name + " , 今年"+ age +"岁了")

但是上面的代码暂时无法测试，因为浏览器目前还不支持ES6 的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5，比如Babel-cli工具

我们暂时不做测试，大家了解即可。

0.4 结论

  1. 模块化就是把拆分代码，方便重复利用
  2. 模块功能主要由两个命令构成：export和import。
    • export命令用于规定模块的对外接口，
    • import命令用于导入其他模块提供的功能。

1 SPA-Vue企业级开发模式介绍

1.1 目标

能够说出SPA-Vue企业级开发模式的相关概念

1.2 路径

  1. 介绍SPA的概念

  2. 阐述SPA的优点和缺点

  3. 阐述Vue全家桶技术栈的组件

  4. 讲解SPA中的Vue组件

1.3 体验

1.3.1 什么是SPA？

SPA(Single Page Application)：单页面应用程序，是一种前端的开发技术，是现在前、后端分离下的一种产物。

  • 传统的网站

​ 我们传统的网站是由很 多个独立的页面 组成的，当我们点击页面中的 a 标签时，就会向服务器发送一个新的请求，然后下载另一个页面显示，跳转时是页面之间的跳转。

  • SPA

    SPA（单页面应用程序），顾名思议，整个网站中只有一个页面，在这个页面中会加载很多个不同的组件，当我们点击按钮时，并不会打开一个新的页面，而是还在当前的页面中切换显示不同的组件。

1.3.2 SPA 的优、缺点

  • 优点

1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次

2、并且把大量操作都放到了浏览器中去完成

3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备

4、而且前端只关注前端、后端只操作数据，各司其职

  • 缺点

1、首屏加载速度可能会很长

2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到

3、页面复杂度提高、开发难度加大

1.3.3 Vue全家桶的技术栈

Vue全家桶有哪些技术？

我们可以使用 Vue 框架来开发 SPA，开发时使用的技术：

1、使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署环境

2、使用 Vue-Router 实现路由，实现组件之间的切换

3、使用 Vuex 实现状态数据的管理

4、使用 axios 发送 AJAX 和服务器通信

1.3.4 SPA中的组件-*.vue

在使用 Vue 开发 SPA 时，SPA 是由很多个 Vue 的组件组成的，每个组件就是一个 .vue 文件。

每个 .vue 文件中都由三部分组成：HTML、CSS、JS，并且：

1、html：所有的 html 代码必须要写在 <template>html代码</template> 标签中

2、css：所有的 css 代码写在 <style> css样式表<style> 标签中

3、js：所有 js 代码写在 <script>js代码</script> 标签中

以下是一个* .vue 文件中的内容：

<template>
<div>
	<h1>
        Hello World ! 我是 {{ tome }}
    </h1>    
    <input type="button" @click="sayHi" value="sayHi">
</div>
</template>

<style>
body{
	background-color: #EEE;
}
h1 {
    font-size: 30px;
}
</style>

<script>
export default {
    data(){
        return {
            name:'tom'
        }
    },
    methods:{
        sayHi(){
            alert("Hi")
        }
    }
}
</script>

1.4 结论

  1. 什么是SPA？

    SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。

  2. SPA的优缺点

    • 优点

      1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次

      2、并且把大量操作都放到了浏览器中去完成

      3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备

      4、而且前端只关注前端、后端只操作数据，各司其职

    • 缺点

      1、首屏加载速度可能会很长

      2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到

      3、页面复杂度提高、开发难度加大

  3. Vue全家桶技术栈包含哪些技术？

    1、使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署

    2、使用 Vue-Router 实现路由，实现组件之间的切换

    3、使用 Vuex 实现状态数据的管理

    4、使用 axios 发送 AJAX 和服务器通信

  4. SPA中VUE组件格式

    每个 .vue 文件中都由三部分组成：HTML、CSS、JS

    • html必须写在标签中

    • css必须写在

2 Vue CLI构建SPA项目

2.1 使用 Vue CLI构建项目

2.1.1 目标

  1. 掌握Vue-CLI脚手架构建SPA项目

2.1.2 路径

  1. 下载和安装Vue-CLI

  2. 使用Vue-CLI创建SPA项目

  3. 启动SPA项目

2.1.3 体验

2.1.3.1 下载安装Vue-CLI

官方文档：https://cli.vuejs.org/zh/

在这里插入图片描述

首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本。

然后，我们就可以使用 npm 来安装 vue/cli ：

npm install -g @vue/cli

安装之后，我们可以在命令行中使用 vue 指令查看安装的版本：

vue --version
2.1.3.2 创建一个项目

我们可以使用下面的命令来创建一个 SPA 的项目：

vue create 项目名称

创建项目时，会提示我们选择项目中需要使用的组件，我们可以使用默认的配置，也可以自己手动选择需要加载的组件。

【第一步】手动选择组件

在这里插入图片描述

【第二步】勾选需要安装的组件：

在这里插入图片描述

​ babel：将ES6的语法转成浏览器可以执行的低版本js语法

​ Router：（必须）路由

​ Vuex： 可选

【第三步】选择Vue版本

在这里插入图片描述

【第四步】使用路由的 history 模式：

在这里插入图片描述

【第五步】把配置写到 package.json 文件中：

在这里插入图片描述

不保存本次的配置：

在这里插入图片描述

项目创建成功。

2.1.3.3 启动项目

安装成功之后，我们可以进行使用以下指令启动项目：

cd 项目名   // 进入项目目录
npm run serve   // 启动项目

在这里插入图片描述

启动之后我们可以在浏览器中访问欢迎页面：

在这里插入图片描述

2.1.4 总结

1 安装Vue-CLI的命令：npm install -g @vue/cli

2 创建SPA项目的命令：vue create 项目名字

3 运行SPA项目的命令：npm run serve

2.2 SPA项目目录介绍

2.2.1 目标：

掌握SPA项目目录结构，知道未来的代码资源、图片资源等等存放的文件夹

2.2.2 路径：

1 阐述SPA项目目录结构

2.2.3 体验

在这里插入图片描述

2.2.4 总结

在这里插入图片描述

2.3 入口文件main.js介绍

2.3.1 目标

了解main.js的功能和作用

2.3.2 路径

  1. 介绍main.js的功能
  2. 详解main.js中的代码

2.3.3 体验

2.3.3.1 main.js的功能

入口文件，项目启动之后会最先运行 main.js 文件

2.3.3.2 main.js代码详解
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,   			 	// 装载 vue-router
  store,     				// 装载 vuex
  render: h => h(App)      // 渲染 App 组件
}).$mount('#app')

在 main.js 文件中会

1、引入 vue 、vue-router、vuex 框架包

2、引入 App 组件

3、创建 Vue 对象并且装载 vue-router , vuex

4、渲染第一个组件：App.vue

所以我们运行之后看到的页面就是 App.vue 组件的内容。

2.3.4 总结

3. Vue-Router

3.1 Vue-Router介绍

在 SPA 中，网站内容的变换实际上的组件的切换，为了方便的实现组件间的切换，Vue 框架引入了 vue-router 工具来实现多个组件之间的切换。

官方文档：https://router.vuejs.org/zh/

在这里插入图片描述

3.2 Vue-Router路由配置

3.2.1 目标

掌握Vue-Router路由的配置

3.2.2 路径

  1. 配置Vue-Router

3.2.3 体验

在使用 vue-router 之前，我们需要先配置访问的路径与要显示的组件的对应关系。

我们需要在 router.js 文件中进行配置。

在这里插入图片描述

router/index.js

默认配置了两个路由:

1、当访问 / 时，显示 Home 组件

2、当访问 /about 时，显示 about 组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// Vue对象的静态方法
Vue.use(VueRouter)
// 有一个页面，在此处就需要配置一个路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',// 就是url，就是未来访问的路径
    name: 'about',// 随意
    component: () => import( '../views/About.vue')
  },
  {
    path: '/list',// 就是url，就是未来访问的路径
    name: 'list',// 随意
    component: () => import( '../views/List.vue')
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

说明：

1、about 组件的写法是延迟加载：在访问 /about 路径时才会加载该组件，这样可以提高首屏显示速度

2、/* webpackChunkName: "about" */ 的意思是将这个组件添加到 about 这个组中，当访问 about 这个组件时就会添加所有 about 这个组中的组件

3.3 Vue-Router路由使用

3.3.1 目标

掌握Vue-Router路由的跳转方式

3.3.2 路径

1 介绍路由方式

2 路由的二种使用方式

3.3.3 体验

3.3.3.1 路由方式介绍

当我们定义好路由之后，我们就可以在页面中添加按钮跳转到相应的路由，有两种跳转方法：

1、在 HTML 中使用 router-link 标签（相当于a标签）

2、在 JS 中使用 router-push 实现跳转（相当于 location.href ）

this.$router.push("切换组件的地址")
3.3.3.2 router-link标签-html代码中使用

我们可以在页面中使用 router-link 标签来制作可以跳转的按钮（相当于 a 标签）：

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</div>

说明：to 属性用来指定点击按钮时要切换到的路由

在这里插入图片描述

3.3.3.3 this.$router.push-js脚本中使用

在 JS 中我们可以使用 this.$router.push 实现跳转。

login(){
  console.log( '登录成功' )
  // 跳转到 /
  this.$router.push('/主页面.vue')
}

3.3.4 总结

  1. 路由切换的两种方式
    • router-link在HTML代码中使用
    • this.$router.push在js脚本中使用

3.4 组件容器

3.4.1 目标

掌握组件容器的使用

3.4.2 路径

  1. 学习

3.4.3 体验

我们在使用 vue-router 时，除了要配置路由之后，最重要的是，我们还需要在页面中使用 router-view 标签来指定组件显示的位置：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!-- 组件显示的容器 -->
    <router-view/>
  </div>
</template>

这时所有的路由组件都会显示在 router-view 标签所在的位置上：

1、默认显示路由配置中的第一个路由，也就是 / 路由

2、当切换路由时，也是在这个标签的位置上切换路由

因为我们在 router.js 文件的路由是这样配置的：

routes: [                    // 配置路由的数组
    {
      path: '/',              // 访问路径
      name: 'home',           // 路由名称
      component: Home         // 对应的组件
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
]

第一个是 home 路由，所以默认显示的就是 Home 组件的内容：

在这里插入图片描述

3.5 案例：添加一个页面

3.5.1 目标

掌握Vue-Router路由的基本使用

3.5.2 路径

  1. 创建Hello.vue页面
  2. 配置路由
  3. 通过路由的方式进行跳转

3.5.3 体验

【第一步】首先在 views 目录下创建 Hello.vue 组件

views/Hello.vue

<template>
    <div>
        <input @click="sayHello" type="button" value="sayHello">
    </div>
</template>

<style>
body {
    background-color: #eee;
}
</style>

<script>
export default {
    methods:{
        sayHello(){
            alert('Hello ~')
        }
    }
}
</script>

注意：HTML的代码必须要写在一个根标签中。

【第二步】配置路由

在 router.js 文件中的 routes 数组中添加一个 hello 路由

router.js

routes: [
    ...
    {
      path: '/hello',   // 路径
      name: 'hello',    // 名称
      component: () => import('./views/Hello.vue')    // 加载的组件
    }
]

【第三步】添加切换按钮

在 App.vue 页面中添加跳转到 /hello 的按钮

App.vue

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link> |
  <router-link to="/hello">hello</router-link>
</div>

添加之后保存，保存之后页面会自动刷新：

在这里插入图片描述

点击 hello 按钮，就会在 router-view 标签的位置上切换到 Hello 组件：

在这里插入图片描述

3.7 页面组件与功能组件

3.7.1 目标

掌握页面组件和功能组件

3.7.2 路径

  1. 介绍页面组件和功能组件的概念
  2. 介绍页面组件的使用
  3. 介绍功能组件的使用

3.7.3 体验

3.7.3.1 页面组件和功能组件的概念
组件分为两种：页面组件 和 功能组件。
  • 页面组件

用来构建独立页面的组件，保存在 views 目录中，页面组件中可以包含多个功能组件。

  • 功能组件

我们可以将页面中一些独立的小功能制作成组件，这些组件可以被页面组件引入使用，比如：翻页、时间插件等，功能组件保存在 components 目录中，这些组件不能独立显示，只能被包含在一个页面组件中使用。

页面组件和功能组件的关系：（每个页面就是一个页面组件，每个页面中可以包含多个功能组件）

在这里插入图片描述

3.7.3.2 页面组件的使用
3.7.3.3 功能组件的使用

系统中默认有一个 HelloWorld 组件：

在这里插入图片描述

如果要在页面中使用这个组件需要先使用 import 引入该组件，然后在使用标签使用该组件。

修改 Hello.vue 页面：

views/Hello.vue

在这里插入图片描述

效果：

在这里插入图片描述

3.8 路由参数

3.8.1 目标

掌握路由中传递参数

3.8.2 路径

  1. 在配置路由的时候定义参数
  2. 在使用路由的时候携带参数
  3. 跳转的组件页面获取参数

3.8.3 体验

3.8.3.1 配置路由的时候定义参数

我们在定义路由时经常需要为路由添加一些参数，比如当点击一件商品进入商品详情页时需要把商品的ID传到页面中。

我们可以使用以下语法定义带参数的路由：

{
  path: '/hello/:id',
  name: 'hello',
  component: () => import('./views/Hello.vue')
}

如果我们希望只匹配数字做为参数，这时可以使用正则表达式来限制匹配的类型：

id 参数必须是数字：

{
  path: '/hello/:id(\\d+)',
  name: 'hello',
  component: () => import('./views/Hello.vue')
}
3.8.3.2 使用路由的时候携带参数

这时当我们访问 /hello/1 , /hello/tom 等路径时匹配 Hello 组件。

3.8.3.3 跳转的组件页面获取参数

在组件中可以使用 this.$router.params 来接收传过来的所有的参数。

比如在 Hello.vue 组件中可以这样接收 id 这个参数：

export default {
    ...
    created(){
        // 打印接收的 id 参数
        alert(this.$route.params.id)
    }
    ...
}

3.8.4 总结

  1. 配置路由的时候定义参数：path: '/hello/:id(\\d+)'
  2. 使用路由的时候携带参数：/hello/1
  3. 跳转的页面获取参数：this.$route.params.id

3.9 嵌套路由（很重要！！！！！！掌握）

3.9.1 目标

掌握嵌套路由的使用

3.9.2 路径

  1. 创建两个页面HelloJack.vue和HelloTom.vue
  2. 配置路由
  3. 编写Hello.js页面
  4. 测试
  5. 嵌套组件的关系

3.9.3 体验

【第一步】创建两个页面HelloJack.vue和HelloTom.vue

【第二步】router.js配置嵌套路由

{
  path: '/hello',
  name: 'hello',
  meta: {
    title:'hello'
  },
  component: () => import('./views/Hello.vue'),
  children: [
    // /hello/tom
    {
      path: "tom",
      name: "hello-tom",
      component: () => import('./views/HelloTom.vue')
    },
    // /hello/jack
    {
      path: "jack",
      name: "hello-jack",
      component: () => import('./views/HelloJack.vue')
    }
  ]
}

【第三步】编写Hello.js页面，使用嵌套路由

在 Hello.vue 页在中再添加两个按钮和一个 router-view 设置子页面的位置：

views/Hello.vue

<router-link to="/hello/tom">Hello Tom</router-link> |
<router-link to="/hello/jack">Hello Jac</router-link>
<hr>
<router-view></router-view>

【第四步】效果

效果：当点击 Hello Tom 和 Hello Jack 按钮时，会切换嵌套组件

在这里插入图片描述

【第五步】嵌套组件关系图：

在这里插入图片描述

4 spa中使用axios

官方推荐我们在 vue 中使用 axios 发送 AJAX 的请求。

在开发 SPA 时，我们需要把 axios 集成进来。

4.1 目标

掌握SPA中Axios的使用

4.2 路径

  1. 下载安装Axios
  2. 局部使用Axios
  3. 全局使用Axios

4.3 体验

4.3.1 下载安装Axios

使用的方法非常的简单：

1、先安装

npm install  axios

4.3.2 局部使用Axios

1、局部引入和使用，在每个*.vue页面中都需要引入

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import  axios from "axios";
axios.defaults.baseURL="http://localhost:8080"

export default {
  name: 'home',
  data(){
    return {
        users:[]
    }
  },
  created(){
    axios.get("/user").then(res => {
        this.users = res.data
    })
  }
}
</script>

4.3.3 全局使用Axios

1、全局引入

安装之后需要修改 main.js ，在文件中引入并使用 axios 包：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'
// axios.defaults.baseURL="http://localhost:8080"
// 基地址设置，服务器地址设置
axios.defaults.baseURL='http://localhost:8080'

Vue.prototype.$http = axios

Vue.config.productionTip = false

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

2、使用

引入了之后，我们就可以在项目中使用以下三种方法来使用 axios 了：

export default {
  name: 'home',
  data(){
    return {
      users:[]
    }
  },
  created(){
    this.$http.get("/user").then(res => {
        this.users = res.data
    })
  }



}
</script>

4.4 案例：通过 axios 请求数据

4.1 目标

掌握Axios的Get方式请求数据

4.1 路径

  1. 编写后台接口
  2. Vue中编写代码请求数据
  3. 页面展示数据
  4. 测试

4.1 体验

【第一步】在 Home.vue 中显示数据

Home.vue

在初始化时执行 AJAX 获取数据：

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { axios } from "axios";
axios.defaults.baseURL="http://localhost:8080"

export default {
  name: 'home',
  data(){
    return {
        goods:[]
    }
  },
  created(){
    axios.get("/goods").then(res => {
        this.goods = res.data
    })
  }
}
</script>

【第二步】将数据绑定到页面：

<ul>
  <li v-for="(v,k) in goods" :key="k">
    {{v.goods_name}} ￥ {{v.price}} <hr>
  </li>
</ul>

【第三步】效果：

在这里插入图片描述

Lzh_1122
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue全家桶.zip
08-07
vue全家vue全家桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。
全面介绍vue 全家桶和项目实例
08-28
"Vue全家桶和项目实例详解" Vue.js是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。Vue.js的核心库只关注视图层，它不仅易于上手，...
vue全家桶
2303_76218115的博客
03-26 1320
Vue脚手架、Vuex、Vue-router和Axios是Vue.js的核心工具，它们分别提供了一套完整的开发环境、状态管理、路由管理和网络请求。在本篇博客中，我们介绍了它们的使用方式、实际应用场景以及底层实现原理。希望本篇博客能够对大家有所启发，为大家的Vue开发之路提供帮助。
vue 全家桶 vue教学 vue
weixin_71899005的博客
03-06 2123
vue 全家桶 vue教学 vue
Vue 全家桶
weixin_52905182的博客
01-30 3477
vue全家桶
【vue2】vue全家桶介绍，学习vue必备
嗨，朋友你好！我是前端领域的工作者
03-16 5771
vue全家桶介绍包括vue介绍、vue-cli、vue-router、vuex、axios、UI框架
vue全家桶详解
zzx262625的博客
03-05 1008
Vue CLI：Vue CLI是Vue.js官方的命令行工具，用于快速搭建和开发Vue.js应用。Vue CLI提供了现代化的开发工具和项目脚手架，支持快速创建Vue.js项目、配置开发环境、构建生产版本等功能，大大简化了Vue.js应用的开发和部署流程。Vuex：Vuex是Vue.js官方的状态管理库，用于集中式管理Vue.js应用中的状态。总的来说，Vue全家桶提供了一套完整的解决方案，使开发者可以更高效地构建现代化的Vue.js应用程序，并实现路由管理、状态管理和项目开发等功能。
vue 全家桶
weixin_45677987的博客
02-03 1954
Vue 全家桶： Vue 全家桶： 都包含那些内容： 全家桶： 顾名思义， 对于一个完整重大型单页面应用来说所必需的所必须插件和框架。 1： 此文章主要讲解vue-cli 脚手架开发方式， 主要介绍插件安装方法以及功能点介绍； 不介绍各个插件的具体使用方法， 具体使用方法详见其介绍。 2： vue-cli: 也叫做脚手架， 官方定义为Vue.js 开发标准工具！ 相比较script 标签引入， 脚手架具有如下特点： 1）、功能丰富 对 Babel、TypeScript、ESLint、PostC...
VUE全家桶有哪些？
Fziha的博客
09-27 192
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。
vue全家桶都有哪些
lou15516575959的博客
07-05 8811
Vue全家桶
从头到尾创建一个vue全家桶项目
weixin_48447589的博客
03-06 368
使用vue脚手架创建一个vue全家桶项目
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
尚硅谷提供的"Vue全家桶"教程涵盖了Vue的核心概念、组件化开发、路由、状态管理等多个方面，旨在帮助开发者全面掌握Vue.js技术栈。在这个压缩包中，包含了一个名为"尚硅谷_Vue全家桶.pdf"的文件，它很可能是详细的...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
基于spring cloud 和vue全家桶的开源电商源码
06-02
基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的...
上传文件传参 pc端vue的formData
qq_42440919的博客
07-25 411
if(ref.toString().indexOf('qrcode') >= 0) formData.append('noStbg', true)//添加参数。//添加参数并且重新命名文件名称。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 887
本文介绍了电子签名、图片合成、及预览功能
vue3使用递归组件渲染层级结构
最新发布
weixin_42234899的博客
07-25 358
vue3使用递归组件渲染层级结构
Vue系列面试题
qq_44186810的博客
07-23 792
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
尚硅谷vue全家桶word
11-14
尚硅谷vue全家桶是一个web开发技术栈，集成了Vue.js框架、Vue Router、Vuex、Axios等主流的前端开发工具和库。Vue.js是一个轻量级、高效的JavaScript框架，适合构建单页面和动态网页应用。Vue Router是官方提供的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值