vue3+vite开发相关注意事项 总结如下
1.通过vite 来进行创建 vue项目
2.设置项目名称
3.进入项目
4.安装依赖
5.运行项目
//vite安装vue3
npm install -g create-vite-app
create-vite-app app
cd app //进入工程项目文件夹 app 项目目录
npm install //安装项目依赖
npm run dev //运行项目
vue-router 4.0 以上版本
确认好版本
npm install vue-router@4
vue-router 代码 /router/index.ts
注意区别, vue2 跟 vue3 路由的使用区别
通过vue - router 来进行路由的设置,createRouter 创建路由
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
// import { useStore } from 'vuex'
const routes = [
{
path: '/',
component: Home,
redirect: '/index',
children: [
{
path: 'index',
name: 'index',
component: () => import('../views/index.vue'),
meta: { requiresAuth: true, title: '首页' },
},
{
path: 'user',
component: () => import('../views/jjr/index.vue'),
meta: { requiresAuth: true, title: '个人中心' },
},
{
path: 'user_info',
component: () => import('../views/jjr/info.vue'),
meta: {
requiresAuth: true,
title: '修改信息',
isBank: true,
hiddenbottom: true,
},
},
],
},
{
path: '/login',
name: 'login',
component: Login,
},
{
path: '/register',
name: 'register',
component: Register,
},
{
path: '/404',
name: '404',
component: () => import('../views/404.vue'),
},
{
path: '/:pathMatch(.*)',
redirect: '/404',
component: Login,
},
]
export const router = createRouter({
history: createWebHashHistory(),
routes: routes,
})
vuex 4.0版本
npm install vuex@next --save
vuex 持久化插件 + sotre/index.js
通过 createStore 来创建 vuex 进行状态管理。
npm install --save vuex-persist
import { createStore } from 'vuex'
import mutations from './mutations'
import actions from './actions'
import VuexPersistence from 'vuex-persist'
const state = {
token
}
// vuex 状态刷新持久化插件
const vuexLocal = new VuexPersistence({
storage: window.localStorage,
})
const store = createStore({
state,
mutations,
actions,
plugins: [vuexLocal.plugin],
})
export default store
actions mutaions 文件 const 声明一下 然后export default 导出即可 举例:
const getters = {
jjrtoken: (state) => state.jjrtoken,
}
export default getters
axios 安装
$ npm install axios --save
AxiosPromise,AxiosResponse 获取axios
import { AxiosPromise, AxiosResponse } from 'axios'
import { Interceptors } from './interceptors'
// 请求配置
export class HttpServer {
axios: any
// 获取axios实例
constructor() {
this.axios = new Interceptors().getInterceptors()
}
request(config: any): AxiosPromise {
return new Promise((resolve, reject) => {
this.axios(config)
.then((res: AxiosResponse) => {
resolve(res)
})
.catch((err: any) => {
reject(err)
})
})
}
}
const http = new HttpServer()
export default http
qs 安装
npm install qs
注意 这里qs 安装很有必要的,为了应对项目的跨域问题啥的也有帮助
下面的方法做了一些 baseurl 设置,请求拦截,跟相应拦截,根据自己项目需要 可以做出对应的调整。
import axios, { AxiosInstance } from 'axios'
import store from '../store/index'
import qs from 'qs'
export class Interceptors {
instance: AxiosInstance
constructor() {
this.instance = axios.create({
baseURL:
'',
timeout: 10000,
})
this.init()
}
// 初始化
init() {
// 请求拦截
this.instance.interceptors.request.use(
(config) => {
console.log(store.state['jjrtoken'])
if (store.state['jjrtoken']) {
config.headers['jjr_token'] = store.state['jjrtoken']
}
config.data = qs.stringify(config.data) //全局使用
return config
},
(err) => {
console.log(err)
}
)
//响应拦截
this.instance.interceptors.response.use(
(response) => {
// console.log('初始化')
// const res = response.data
// return res
const res = response.data
if (!response.status.toString().startsWith('2') || res.code === -1) {
// 如果状态码不是2开头或者接口code返回-1 则是返回错误信息
console.error('系统错误,请检查API是否正常!')
return
}
return Promise.resolve(res)
},
(error) => {
// if (error.message === 'Request failed with status code 500') {
// console.error('系统错误,请检查API是否正常!')
// return
// }
// let code = -110
// if (error && error.response && error.response.status) {
// code = error.response.status
// // 登陆过期
// if (code === 401 || code === -3) {
// // removeToken()
// }
// } else {
// console.error(error.message)
// }
const err = { errCode: -110, errMsg: error.message || 'Error' }
return Promise.resolve(err)
}
)
}
// 返回一下
getInterceptors() {
return this.instance
}
}
这里是main.js 按需引入的一些展示了 ,对于项目还是有一定好处的,大家可以参考
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import { router } from './router'
import {
Form,
Field,
CellGroup,
Button,
Tabbar,
TabbarItem,
Swipe,
SwipeItem,
NoticeBar,
Image as VanImage,
Cell,
Icon,
Popup,
Picker,
PasswordInput,
Search,
PullRefresh,
List,
RadioGroup,
Radio,
} from 'vant'
import 'vant/lib/index.css'
import 'lib-flexible'
createApp(App)
.use(store)
.use(router)
.use(Form)
.use(Field)
.use(CellGroup)
.use(Button)
.use(Tabbar)
.use(TabbarItem)
.use(Swipe)
.use(SwipeItem)
.use(NoticeBar)
.use(VanImage)
.use(Cell)
.use(Icon)
.use(Picker)
.use(Popup)
.use(PasswordInput)
.use(Search)
.use(PullRefresh)
.use(List)
.use(RadioGroup)
.use(Radio)
.mount('#app')