vue3+vite开发

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')