【VUE】vue+vue-router+vuex+axios+vant构建vue实战项目

目录

一、搭建vue项目

1、配置依赖环境

2、搭建vue项目

二、添加依赖

添加vuex状态管理器

引入vant等组件

设置路由跳转

在src/router/index.js文件中设置路由跳转

在main.js文件中引入

在vue文件中添加路由跳转

引入封装好的请求拦截器

在src目录下新建utils文件夹，新建文件“axios.js”

在main.js文件中引入

发送请求

 

---

一、搭建vue项目

1、配置依赖环境

 

1>安装node.js

2>安装国内镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

3>安装vue-cli

cnpm install -g @vue/cli

2、搭建vue项目

然后创建vue项目，定位到创建项目的文件夹

提示	输入	说明
	vue init webpack vue-demo	创建一个名称为“vue-demo”的vue项目
Target directory exists. Continue? (Y/n)	Y	提示目标目录存在，是否要继续添加，输入Y
Project name (vue-demo)	默认和文件夹名字相同	输入项目名称---项目名称不能有大写字母，输入后回车
Project description (A Vue.js project)	默认回车	输入项目描述---回车
Author	默认回车	输入作者---回车
Vue build (Use arrow keys)	回车
Install vue-router? (Y/n) Y	Y	安装路由
Use ESLint to lint your code? (Y/n)	Y
Pick an ESLint preset (Use arrow keys)	回车
Set up unit tests (Y/n)	N	单元测试
Setup e2e tests with Nightwatch? (Y/n)	N	e2e测试
Should we run `npm install` for you after the project has been created?	回车	vue脚手架工具自动下载依赖，构建项目

完整的创建过程