vue系列（二）——vue3基础项目（集成框架）搭建

目录

一、新建项目

二、集成路由

三、安装配置axios（网络请求库）

四、使用vuex（暂无）

五、结尾

---

搭建流程：

通过Hbuilder X新建vue3项目，然后集成路由（vue-router）、axios（网络请求库）到这里一个基本的项目开发框架搭好了，按项目需要可以集成vuex（数据的存储和管理功能）。

下面开始搭建吧！

一、新建项目

打开编辑器新建项目，填写项目名称，点击创建，之后等待项目加载完成就可以了。我的Hbuilder X 版本是3.4.14

新建的项目目录

下面是vue项目加载页面的形式，单页渲染，所有的内容展示都是在index.html页面上进行渲染，而App.vue是index.html里面最外层的组件容器、包含全局的js代码css样式。所有的页面的渲染是在App.vue容器里面进行

文件main.js：入口js文件，所有全局文件的引入都放在这里面。

运行项目，右键该项目，点击外部命令》npm run dev

 

 至此大致熟悉了项目的文件结构，成功搭建完成了一个hello word项目

二、集成路由

安装路由

npm install vue-router

 安装页面标题工具包，可以让标题随着路由切换而改变

npm install vue-wechat-title

在配置路由前先在src目录下新建目录views用于存放页面

 在views目录下创建两个页面home.vue、login.vue

页面内容简单做个标识，

 

 ok，开始配置路由。

点开App.vue，修改在template中内容替换成 ：

<router-view v-wechat-title="$route.meta.title" />

 接下来在src目录下新建router目录，再在router目录下新建index.js文件

 index.js代码

// import Vue from 'vue'   //引入Vue
import {
	createRouter,
	createWebHashHistory
} from 'vue-router' //引入vue-router
// Vue.use(Router)  //Vue全局使用Router

import home from '../views/home.vue'
import login from '../views/login.vue'


const routes = [
	{
		path: '',
		redirect: "home"
	},
	{
		path: '/login',
		name: 'login',
		component: login,
		meta: {
			title: '登录'
		}
	},
	{
		path: '/home',
		name: 'home',
		component: home,
		meta: {
			title: '首页'
		}
	}
];

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
/* router.beforeEach((to, from, next) => {
	if (to.path === '/login') {
		next();
	} else {
		let token = localStorage.getItem('Authorization');

		if (token === null || token === '') {
			next('/login');
		} else {
			next();
		}
	}
}); */
const router = createRouter({
	history: createWebHashHistory(),
	routes
})
export default router;

 在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App) //创建VUE对象
//导入路由配置
import router from './router'
app.use(router)

import VueWechatTitle from 'vue-wechat-title'; 
app.use(VueWechatTitle)

app.mount('#app')

现在可以测试成果了，在终端输入 npm run dev 运行项目

访问http://localhost:3000/

页面打开自动就打开了http://localhost:3000/#/home

这样路由配置就成功完成了

三、安装配置axios（网络请求库）

首先安装依赖包

npm install axios

先封装基类，做好网络请求的统一处理，然后再做api接口统一管理的封装类

新建文件夹src》utils

存放工具类文件，在目录下新建request.js、api.js

 全局网络请求统一处理类：request.js

import axios from 'axios'

import router from '../router/index.js'

let loading

// 请求拦截
axios.interceptors.request.use(
	(confing) => {
		//设置请求头
		if (localStorage.Authorization) { //判断本地缓存的token是否存在
			confing.headers.Authorization = localStorage.Authorization
		}

		return confing
	},
	(error) => { //token不存在，设置为网络报错
		return Promise.reject(error)
	}
)

//响应拦截
axios.interceptors.response.use(
	(res) => { //响应处理

		if (res.status === 200) { //响应码200请求成功

			if (res.data.code == '200') { //接口请求成功
				return Promise.resolve(res.data)
			} else if (res.data.code == '10000' || res.data.code == '10001') {//token验证失败，根据自己实际的修改
				
				//清除token
				localStorage.removeItem('Authorization')
				//跳转到登录页面
				router.push('/login')
			} else {
				//Message.error(res.data.msg);
			}
			return Promise.reject(res)
		} else {
			return Promise.reject(res)
		}
		// return res
	},
	(error) => {
		Message.error('网络出错')
		// endLoading()

		// 获取状态码
		const {
			status
		} = error.response

		if (status === 401) {
			//Message.error('请重新登录')
			//清楚token
			localStorage.removeItem('Authorization')
			//跳转到登录页面
			router.push('/login')
		}
		return Promise.reject(error)
	}
)
export default axios

 接口统一管理类：api.js

先安装qs

npm i qs 2

/**
 * api接口的统一封装
 */
import axios from './request.js';
import Qs from 'qs';
const urlApi = 'http://localhost:3000/';//本地测试

// 登录
export function UserLogin(query) {
    return axios({
        url: urlApi + 'loginData',//模拟数据接口
        method: 'post',
        data: Qs.stringify(query)
    })
}

在login.vue页面中使用先引入，再在代码中构建方法回调

import {
        UserLogin
    } from '../utils/api.js'

使用代码

UserLogin(me.loginForm).then((response) => {
                            if (response.code == 200) {
                                me.$message({
                                    message: '登陆成功',
                                    type: 'success'
                                });
                                localStorage.setItem('Authorization', response.token);
                                me.$router.replace('/');
                            }else{
                                me.$message.error('账号或密码错误');
                            }
                        }).catch((error) => {
                            me.$message.error('网络出错');
                            console.log(error);

                       })

这里就不测试了。

 如想了解axios详细的使用，请自行搜索。

四、使用vuex（暂无）

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

暂时未在项目中使用，等之后用到再补充。

五、结尾

好了，到这里，一个基本的vue3项目框架搭建完成了，可以正式开始页面开发了。