【vue】vue的创建、router,vuex,axios的安装使用

是胡不是华

已于 2024-10-15 10:26:48 修改

阅读量651

点赞数

分类专栏： vue 文章标签： vue.js

于 2023-05-10 21:19:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43185247/article/details/130608822

版权

本文介绍了如何创建Vue项目，详细讲解了vue-router、vuex和axios的安装及使用方法。在创建项目时，通过vue init webpack命令生成项目。对于vue-router，演示了安装特定版本以解决兼容问题，并配置路由组件。在vuex部分，说明了安装指定版本的vuex，创建store和模块，以及如何在main.js中引入使用。最后，介绍了axios的安装和在项目中应用，包括get、post等请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建vue项目

router安装使用

vuex的安装使用

axios安装使用

创建vue项目

在文件夹打开cmd,执行vue init webpack 项目名，会在当前文件夹下生成项目，创建过程一路填N。

vue init webpack myvue

router安装使用

安装

cd 到vue项目路径下，执行npm install vue-router --save

npm install vue-router --save

安装过程会报错
在这里插入图片描述
原因：下载的最新的vue-router版本，由于vue与vue-router版本兼容的问题，需要在安装语句后加入需要下载vue-router版本
尝试一：

npm install --legacy-peer-deps vue-router@4.0.13

结果不兼容出现以下报错
在这里插入图片描述
尝试二：@3.5.2版本较为稳定，安装成功，npm run dev正常启动

卸载：npm uninstall vue-router
下载：npm install vue-router@3.5.2

使用

在src/components创建两个vue文件用于路由跳转
home.vue

<template>
    <div>
      <h2>这是Home主页</h2>
      <div>欢迎来到home主页</div>
    </div>
   </template>
   
   <script>
      export default {
   
          name: "Home"
      }
   </script>
   
   <style scoped>
   </style>

about.vue

<template>
    <div>
      <h2>关于页面</h2>
      <div>欢迎来到关于页面</div>
    </div>
   </template>
   
   <script>
      export default {
   
          name: "About"
      }
   </script>
   
   <style scoped>
   
   </style>

在src下创建router/index.js

// src/router/index.js就是当前项目的路由模块
// 1 导入Vue 和VueRouter的包
import Vue from 'vue'
import Router from 'vue-router'
// 导入路由要用到的组件
import Home from '../components/home.vue'</

最低0.47元/天解锁文章