vue 全家桶

已于 2023-05-14 18:02:16 修改
阅读量139 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-14 13:01:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56708967/article/details/130653454
版权

知识回顾

vue基础

指令

生命周期

事件

MVVM（数据驱动视图）

组件

局部组件和全局组件

组件通信

        父子组件 props和$emits

        $bus 中央事件总线

        provide和inject

        $attrs和$listeners

        this.$parent 、ths.$children、 this.$slots...

组件设计

        如何更优雅地设计一款组件

render(h) jsx

vue性能优化的9个技巧

Element-ui /antd-design-vue || vant-ui/iview

awesome

axios是基于XMLHttpRequest promise

vue-xxx react-xxx 插件(github star 更新时间)

目录

vue-router的基础使用

vue-router 安装

main.js

 router/index.js

App.vue

  嵌套路由 views/User.vue

 views/Login.vue

  views/course/index.vue

命名视图

完整的导航解析流程

vuex基础state/getter/mutation/action

vuex导图 

安装vueX

store/index.js配置

 main.js

 组件views/About.vue

 App.vue

components/ProductList.vue

components/ShoppingCart.vue

store/modules/cart.js 

 store/modules/products.js 

src/api/products.js 

src/utils/request.js 

vue.config.js 

vue-router的基础使用

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

vue-router 安装

npm i vue-router -S

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'


Vue.use(VueRouter)
// 路由管理表
const routes = [

    {
        path:'/',
        // 命名路由
        // redirect: '/home',
        name:'Home',
        component:HomeView
    },
        // 同一个路径可以匹配多个路由,匹配的优先级按照路由的定义顺序来匹配的
    {
        path: '/about',
        name: 'About',
        component: () => import( '@/views/AboutView.vue')
    },
    {//带参路径，user组件复用
        path:'/user:userName',
        name:'User',
        component:() =>import('@、views/User.vue')
    },
    {
        path: '/course',
        // name: 'Course',
        component: () => import('@/views/course'),
        //路由权限拦截
        meta: { requireAuth: true },
        //嵌套路由
        children: [
          {
            path: '',
            component: () => import('@/views/course/home'),
          },
          {
            path: 'front',
            component: () => import('@/views/course/front'),
          },
          {
            path: 'backend',
            component: () => import('@/views/course/backend'),
          },
        ],
   },
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/login'),
   },

   {//放到最后
     path:'*',
     component:() =>import('@/views/404.vue')
   }
]

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

// 全局守卫
router.beforeEach((to, from, next) => {
  // 需要权限,在黑名单
  if (to.matched.some((record) => record.meta.requireAuth)) {
    // 用户是否有登录
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      next()
    } else {
      next({
        path: '/login',
        query: {
          redirect: to.fullPath,
        },
      })
    }
  } else {
    next()
  }
})

export default router

 注：同路径可以匹配多个路由，按照优先顺序匹配，重名路由将选取靠前那个

        path:* 必须放到最后面，直接跳转404页面

        路由权限拦截 meta: { requireAuth: true },

        全局路由守卫

        router.beforeEach((to, from, next) => {
 
                  if (to.matched.some((record) => record.meta.requireAuth)) {... }

                  else{next()}

        }

App.vue

<template>
  <div id="app">
    <nav>
      <!-- router-link 内置组件 被渲染为a标签 to会被渲染成href属性 -->
      <router-link to="/">Home</router-link> |
      
      <router-link to="/about">About</router-link>|
      <router-link :to="{name:'Test'}">Test</router-link>|
      <router-link :to="{name:'User',params:{userName:'kiki'}}">User(kiki)</router-link>|
      <router-link :to="{name:'User',params:{userName:'xiaomage'}}">User(xiaomage)</router-link>|
      <router-link :to="{name:'Login'}">登录</router-link>|
      <router-link to="/course">课程</router-link>|
      
    </nav>
    <router-view/>
  </div>
</template>

 注：动态路由匹配使用 :to ={name:'',params:{id:1}}

 <router-link :to="{name:'user',params:{id:1}}">User</router-link> |

  嵌套路由 views/User.vue

<template>
  <div>
    我是用户组件页面{{ name }}
    <router-link to="/">跳首页</router-link>
    <button @click="goHome">跳转到首页</button>
    <button @click="goBack">后退</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    }
  },
  created() {
    const { userName } = this.$route.params
    if (userName) {
      this.name = userName
    }
  },
  // watch监听路由参数的变化
  //   watch: {
  //     $route(to, from) {
  //       this.getUserInfo(to.params.userName)
  //     },
  //   },
//路由守卫deforeRouteUpdate(to,from,next){} ,当路由更新时触发
  beforeRouteUpdate(to, from, next) {
    this.getUserInfo(to.params.userName)
    next()
  },
  methods: {
    goBack() {
      this.$router.go(0)
    },
    getUserInfo(username) {
      // 发起ajax 获取当前用户的数据
      setTimeout(() => {
        this.name = username
      }, 1000)
    },
    goHome() {
      //   编程式导航
      // this.$router.push('/')
      this.$router.push({
        name: 'Home',
        query: {
          id: 1,
        },
        // params:{}
      })
    },
  },
}
</script>

注：

        路由守卫deforeRouteUpdate(to,from,next){} ,当路由更新时触发

        编程式导航：this.$router.push({ ...})      历史跳转 this.$router.go(-1)          

 views/Login.vue

<template>
  <div>
    <h2>登录页面</h2>
    <input type="text" v-model="form.user" />
    <input type="password" v-model="form.pwd" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        pwd: '',
      },
    }
  },
  methods: {
    handleLogin() {
      // 获取用户名和密码
      setTimeout(() => {
        const { user, pwd } = this.form
        const data = {
          user,
          pwd,
        }
        // 保存到本地
        localStorage.setItem('userInfo', JSON.stringify(data))
        // 跳转到课程页面
        this.$router.push({
          //   path: '/course',
          path: this.$route.query.redirect,
        })
      }, 1000)
    },
  },
}
</script>

 注：路由重定向

        this.$router.push({ path:  this.$route.query.redirect })

  views/course/index.vue

<template>
    <div>
        <router-link to="/course">全部</router-link> |
        <router-link to="/course/front">前端</router-link> |
        <router-link to="/course/backend">后端</router-link> |

        <!-- 渲染全部 前端 后端 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

 注：<router-view></router-view> 进行渲染 

        /course会默认进入index.vue

命名视图

非嵌套多视图

router/index.js

{
    path: '/',
    name: 'Home',
    // component: HomeView
    components:{
      default:HomeView,
      //懒加载
      Main:() => import('../views/Main.vue'),
      Sidebar:() => import('../views/Sidebar.vue'),
    }
  },

App.vue

    <router-view name="Main" />
    <router-view/>
    <router-view name="Sidebar"/>

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用离开守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

vuex基础state/getter/mutation/action

详细介绍：vuex基本介绍

vuex是专门用来管理vue.js应用程序中状态的一个插件。

作用：将应用中的所有状态都放在一起，集中式来管理。

需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex导图 

  1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
  2. mutations ： 使用它来修改数据(类似于methods)更改state中的数据必须提交(commit) mutations来进行更改
  3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )
  4. actions： 发起异步请求
  5. modules： 模块拆分

安装vueX

 或者在新建脚手架时选中vuex

vue add vuex 

store/index.js配置

        引入并使用vuex

import Vuex from 'vuex'
// 2.使用当前的插件
Vue.use(Vuex)

        new Vuex.Store 创建store

const store = new Vuex.Store({
  plugins: [createLogger()],
  state: { //当前的状态
    count: 0,
    username: 'kiki'
  },

  getters: {
    evenOrOdd(state) {
      return state.count % 2 === 0 ? '偶数' : '奇数';
    }
  },

  mutations: { //声明同步的方法
    increment(state) {
      // 修改状态
      state.count++
    },
    decrement(state) {
      state.count--
    },
    incrementAsync(state,amount) {
      state.count+=amount;
    }
  },

  actions: { //声明异步的方法
    // commit mutations中声明的方法
    // 修改状态的唯一方法是提交mutation
    incrementAsync({ commit },{amount}) {
      setTimeout(() => {
        commit('incrementAsync',amount)
      }, 1000);
    }
  },

//模板
  modules: {
    cart,
    products
  }
})

//导出store
export default store;

 main.js

导入创建的store进行挂载
import store from './store'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入创建的store
import store from './store'
Vue.config.productionTip = false
// 注册全局组件的方式
import ShoppingCart from '@/components/ShoppingCart';
Vue.component(ShoppingCart.name, ShoppingCart)
// 全局注册过滤器
Vue.filter('currency',(value)=>{
  return '$' + value;
})

new Vue({
  router,
  //一定要挂载
  store,
  render: h => h(App)
}).$mount('#app')

 组件views/About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}} - {{user}}
    {{evenOrOdd}}
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1异步</button>
    <ProductList></ProductList>
    <hr>
    <!-- <ShoppingCart></ShoppingCart> -->
    <shopping-cart></shopping-cart>

  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import ProductList from '@/components/ProductList'
// import ShoppingCart from '@/components/ShoppingCart'
export default {
  components: {
    ProductList,
    // ShoppingCart
  },
  computed: {
    // count() {
    //   return this.$store.state.count;
    // },
    // username(){
    //   return this.$store.state.username;
    // }
    // ...mapState(['count','username'])
    ...mapState({
      myCount: "count",
      user: "username"
    }),
    // evenOrOdd() {
    //   return this.$store.getters.evenOrOdd;
    // }
    ...mapGetters(['evenOrOdd'])
  },
  methods: {
    incrementAsync() {
      // 在组件内部提交数据 载荷形式分发
      // this.$store.dispatch('incrementAsync',{
      //   amount:10
      // });
      this.$store.dispatch({
        type:'incrementAsync',
        amount: 10
      })
    },
    // ...mapActions(['incrementAsync']),

    /* increment() {
      // dispatch触发actions中声明的方法(异步)
      // this.$store.dispatch('increment');
      this.$store.commit("increment");
    },
    decrement() {
      // this.$store.dispatch('decrement');
      this.$store.commit("decrement");
    } */
    ...mapMutations(['increment','decrement'])
  }
};
</script>

 App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>
      {{$store.state.count}}
      {{getCount}}
    </div>
    <router-view/>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters('cart',['getCount'])
  }
};
</script>

components/ProductList.vue

<template>
  <div>
    <h2>我的商铺</h2>
    <ul>
      <li
        v-for="(product) in products"
        :key="product.id"
      >{{product.title}} - {{product.price | currency}} - {{product.inventory}}
       <br>
      <button :disabled='!product.inventory' @click='addProductToCart(product)'>加入购物车</button>
      </li>
     
    </ul>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
  computed: {
    ...mapState("products", ["products"])
  },
  created() {
    this.$store.dispatch("products/getAllProducts");
  },
  methods: {
    ...mapActions('cart',['addProductToCart'])
  },
  
};
</script>

components/ShoppingCart.vue

<template>
  <div>
    <h2>我的购物车</h2>
    <ul>
      <li
        v-for="(item,index) in getCartList"
        :key="index"
      >{{item.title}} - {{item.price | currency}} x {{item.quantity}}</li>
    </ul>
    总价格:{{cartTotalPrice | currency}}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "ShoppingCart", //组件名  注册全局组件时使用,
  computed: {
    ...mapGetters("cart", ["getCartList", "cartTotalPrice"])
  }
};
</script>

使用modules 

store/modules/cart.js 

namespaced: true,

export default {
    namespaced: true,
    state: {
        cartList: [],
        count: 0
    },
    getters: {
        getCount(state) {
            return state.count
        },
        // 获取购物车的数据
        getCartList(state, getters, rootState) {
            return state.cartList.map(({ id, quantity }) => {
                const product = rootState.products.products.find(item => item.id === id);
                return {
                    title: product.title,
                    price: product.price,
                    quantity
                }
            })
        },
        cartTotalPrice(state, getters) {
            return getters.getCartList.reduce((total, product) => {
                return total + product.price * product.quantity
            }, 0);
        }


    },
    mutations: {
        // 第一此添加该商品到购物车
        pushProductToCart(state, { id, quantity }) {
            state.cartList.push({
                id,
                quantity
            })
        },
        // 购物车中已有数据 只改变当前的数量
        incrementCartItemQuantity(state, { id }) {
            const product = state.cartList.find(item => item.id === id);
            product.quantity++;
        }
    },
    actions: {
        addProductToCart({ commit, state }, product) {
            if (product.inventory > 0) { //   有库存
                const cartItem = state.cartList.find(item => item.id === product.id);
                console.log(cartItem);

                if (!cartItem) {
                    //   购物车无数据 新添加到购物车
                    commit('pushProductToCart', { id: product.id, quantity: 1 })
                } else {
                    //购物车中已有数据
                    commit('incrementCartItemQuantity', { id: product.id });
                }
                // 如果想提交另一个模块中的方法，那么需要第三个参数{root:true}
                commit('products/decrementProductInventory', { id: product.id },{root:true})
            }

        }
    }
}

 store/modules/products.js 

import Axios from 'axios'
export default {
    namespaced: true,
    state: {
        products: []
    },
    getters: {

    },
    mutations: {
        getAllProducts(state, products) {
            state.products = products
        },
        decrementProductInventory(state, { id }) {
            const product = state.products.find(item => item.id === id);
            product.inventory--;
        }
    },
    actions: {
        async getAllProducts({ commit }) {
            // 发送请求 获取数据 提交mutation
            try {
                const res = await Axios.get('/api/products');
                const results = res.data.results
                commit('getAllProducts', results);

            } catch (error) {
                console.log(error);

            }
        }

    }
}

src/api/products.js 

import request from '@/utils/request'
export const getProducts = (paramter) => {
  return request({
    url: '/products',
    method: 'get',
    params: paramter,
    // data:paramter
  })
}

src/utils/request.js 

import axios from 'axios'
const request = axios.create({
  baseURL: '/api',
  timeout: 5000,
})
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)
export default request

vue.config.js 

const products = [
    { id: 1, title: 'iphone11', price: 800, inventory: 10 },
    { id: 2, title: 'iphone11 pro', price: 1200, inventory: 15 },
    { id: 3, title: 'iphone11 max', price: 1500, inventory: 5 },
]
module.exports = {
    devServer: {
        before(app, serve) {
            app.get('/api/products', (req, res) => {
                res.json({
                    results: products
                })
            })
        }
    }
}


 

介绍 | vue-element-admin

KIKI哟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue全家桶
2303_76218115的博客
03-26 1311
Vue脚手架、Vuex、Vue-router和Axios是Vue.js的核心工具，它们分别提供了一套完整的开发环境、状态管理、路由管理和网络请求。在本篇博客中，我们介绍了它们的使用方式、实际应用场景以及底层实现原理。希望本篇博客能够对大家有所启发，为大家的Vue开发之路提供帮助。
【Vue】Vue全家桶（一）Vue基础
Better_Xing的博客
05-11 3803
【Vue】Vue全家桶（一）Vue基础
从头到尾创建一个vue全家桶项目
weixin_48447589的博客
03-06 362
使用vue脚手架创建一个vue全家桶项目
Vue项目——用户登录
李公子的博客
08-26 3467
创建组件并配置路由 首先我们创建了一个登录组件 src/views/login/index.vue 将登陆页面组件配置到路由中 const routes = [ { path: '/login', name: 'login', component: () => import('@/views/login') } ] 这里给大家普及一个小知识： 在 VueCLI创建的项目中 @ 表示 src 目录 ...
【Vue+Element-UI】实现登陆注册界面及axios之get、post请求登录功能实现、跨域问题的解决
无法自律的人的博客
09-23 2496
跨域问题（Cross-Origin Resource Sharing，CORS）指的是在浏览器端，由于安全策略限制，不同源（域/协议/端口）之间的网页（或者Ajax请求）无法直接进行交互或访问对方的资源。同源策略是浏览器的一种安全机制，用于保护用户信息和防止恶意攻击。同源策略要求网页只能与相同源的资源进行交互，源（Origin）由协议、域名和端口号组成。当源不一致时，浏览器会阻止跨域的请求。例如，一个网页在域A中运行，试图通过JavaScript向域B发送AJAX请求，此时就会触发跨域问题。
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
vue学习资料，尚硅谷的数据内部文档资料
vue全家桶.zip
08-07
vue全家vue全家桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。桶基础知识。包括vue,vue-cli,vuex.一些基本的方法和属性。
基于spring cloud 和vue全家桶的开源电商源码
06-02
基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的开源电商源码基于spring cloud 和vue全家桶的...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
一个基于JavaScript的vue学习资料文档
vue全家桶学习笔记.md
04-03
vue全家桶学习笔记分享，包含了vue-router，vuex， vue-resource，vue-cli。从安装，到项目的搭建完成的整个过程，可以说是全面的涵盖了vue全家桶的所有内容，是vue整体了解的趋势整合。
vue3.2 登录
grow_的博客
02-23 374
1.@/store/modules/app.js 设置vuex import { login as loginApi } from '@/api/login' // 导入路由跳转 import router from '@/router' export default { namespaced: true, state: () => ({ token: localStorage.getItem('token') || '' }), mutations: { setT
vue点击按钮之后置成不可用_Vue 动态改变 button 的 disabled 状态
weixin_39567046的博客
12-20 1260
在使用 iview 做自定义表单验证时，有一个需求是当用户名和手机号都填写正确后，下一步按钮的 disabled 设置为 false，记录一下学习过程。下一步data () {const validateMobile = (rule, value, callback) => {if (/(^0?[1][3-9][0-9][\d]{8}$)|(^0[1-9][\d]{1,2}[- ]?[\d]...
搭建登陆页面与使用element-ui的检验规则还有后台服务的搭建 2
m0_61464384的博客
04-25 1861
一：前端 1：把APP.vue里的东西删一删，然后router里面引入的也删一删 2：在views里面创建login文件夹 里面创建index.vue 3：然后再router里面引入登陆组件（import Login from "@/views/login"）然后再routers里面进行配置--{url的地址 ，当前路由的名称，当前路由地址匹配的组件是哪个}。 4：APP.vue里面也有路由出口 进行一下测试。这时候把地址换成/login 就会显示登录组件。 ...
# 关于vue正常启动后，控制台报错：Error: Cannot find module ‘@/views/login/index‘
kakabulala的博客
09-25 5720
关于vue正常启动后，控制台报错：Error: Cannot find module ‘@/views/login/index’ 如图 ： **查阅资料应该是路由懒加载的问题，网上查的方法是换node的版本（指路： https://blog.csdn.net/ICANDOD/article/details/105700394 ），这里提供一个其他的思路，直接 修改vue中的 路径，拿我的举例： 修改前 ： ...
MVC 启动失败 “~/Views/Home/Login.aspx”处的视图必须派生自 ViewPage、ViewPage<TModel>、ViewUserControl 或 ViewUserCont...
diru8044的博客
05-27 694
最近在MVC团队开发中遇到这样一个问题。 SVN服务器上的代码在其他同事那里都运行正常。 而我的代码运行一直报错，如图 这个问题困扰了好一会儿，在网上也查了一下，没找到原因。 后来自己突然想起来，最近我安装了MVC4，怀疑是我的运行环境的原因。 找到工程中MVC的引用，果然如此。 我们的项目是MVC2.0的，但是我的代码下来之后引用路径变成了MVC4.0的了。 将...
vue-cli——vue-resource登录注册实例
weixin_34319640的博客
05-08 1733
前言 使用vue-resource请求接口非常方便，在使用前需安装vue-resource依赖并在入口文件main.js中声明。附github地址 实例功能简述 本实例只有简单的两个模块：登录和注册，主要演示如何用vue-resource请求接口以及后期逻辑书写。各个功能如下所示：登录模块登录-用户不存在 登录-密码错误 登录-成功 注销...
Vue2学习笔记3 - 制作Login页面
Coder.Monkey的工作簿
11-07 1018
在学会了用vue-cli安装环境，以及了解了vue-cli4的目录结构后，开始学习如何写代码，从登录页面开始，不过学习总要有参考对象和学习目标，作者打算学习制作一个基本的管理平台框架，先去码云（https://gitee.com/）平台搜索一些vue的代码作为参考学习对象。这里，主要参考good_luck/vue-admin-beautiful（https://gitee.com/chu1204505056/vue-admin-beautiful），以及花裤衩/vue-admin-templa...
“~/Views/Login/Login.aspx”处的视图必须派生自 ViewPage、ViewPage<TModel>、ViewUserControl 或 ViewUserControl<TMod...
dianli0582的博客
06-11 698
“~/Views/Login/Login.aspx”处的视图必须派生自 ViewPage、ViewPage<TModel>、ViewUserControl 或 ViewUserControl<TModel>。 转载于:https://www.cnblogs.com/evan51/p/3781829.html...
vue正常启动后，访问页面是报错： Error: Cannot find module '@/views/login/index'
热门推荐
ICANDOD的博客
04-24 1万+
页面报错信息： 页面路由信息报错： 百度了下问题是路由懒加载时路径没加载出来，可能是node的版本不兼容，修改了node的版本就好了 看了下windows node的版本是：v8.11.3 修改后的版本：v10.19.0 删除 node_modules 重新 npm install 即可 ...
尚硅谷vue全家桶word
最新发布
11-14
尚硅谷vue全家桶是一个web开发技术栈，集成了Vue.js框架、Vue Router、Vuex、Axios等主流的前端开发工具和库。Vue.js是一个轻量级、高效的JavaScript框架，适合构建单页面和动态网页应用。Vue Router是官方提供的路由管理器，可以实现页面的跳转和参数传递。Vuex是用于管理Vue应用中状态的集中式存储，并提供了一种统一的管理方式。Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中发送HTTP请求。 尚硅谷vue全家桶word主要是指它提供了一整套前端开发工具和解决方案，能够帮助开发者快速构建现代化的Web应用。使用Vue全家桶可以提高开发效率，简化代码编写和维护，增强应用的可维护性和可拓展性。另外，尚硅谷对Vue全家桶的教学和培训也十分到位，深入浅出地向学员解释Vue.js的原理和使用方法，让学员能够快速上手并运用于实际项目中。 总之，尚硅谷vue全家桶word提供了一套完整的解决方案，帮助开发者快速构建现代化的Web应用，同时也提供了一流的技术教学和培训，使开发者能够更好地掌握Vue全家桶的技术栈和应用方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值