当前位置：首页 > article >正文

创建vue3项目步骤

article 2024/11/18 7:04:46

脚手架创建项目：

pnpm  create vue

Cd 项目名称
安装依赖：Pnpm i
Pnpm Lint：修复所有文件风格，不然eslint语法警告报错要双引号
Pnpm dev启动项目

拦截错误代码提交到git仓库：提交前做代码检查

pnpm dlx husky-init

pnpm install

目录调整：

访问权限控制router.ts：

前置守卫：

import { userStore } from '@/stores';
// vue3的前置导航
router.beforeEach((to,from)=>{
// next现在可选，next()放行  next（‘/login’）跳转指定路由路径
// 返回false取消
// 返回true|undefined放行
// 返回路由地址（对象格式）重定向

//获取token的
const store=userStore()
// 白名单：不需要登陆的页面可以直接访问
const wihteList=['/login','register']
// 如果没有token并且没有白名单，就重定向到登陆页面
if(!store.token&&!wihteList.includes(to.path)) return '/login'

})

后置守卫页面标题：

router.afterEach((to)=>{
    document.title=`sealtool-${to.meta.title||''}`
})

type文件定义vue-router.d.ts文件类型：

import 'vue-router'

declare module 'vue-router'{扩展vue-router里面得routeMeta接口里面得属性title类型
    interface RouteMeta{
        title?:string
    }
}

手机端安装命令：

1.引入vant组件：

Pnpm  add  vant

2.main.ts引入样式：

import 'vant/lib/index.css'

移动端适配：单位自动转为vw,进行等比例缩放

pnpm i postcss-px-to-viewport -D

新建一个postcss.config.js项目文件：加上一些插件的配置

Vant组件自动注册：

好处：components文件下和vant框架都可以自动注册，不用手动导入

pnpm add unplugin-vue-components -D

主题定制css:

main.scss文件：

定义全局变量：：root{ 变量名字 : #069; }

局部变量: 选择器（.）类名{ 变量名字 : #069; }

使用变量的方法: color：var(变量名字)

覆盖vant主题色方法：

持久化：

pnpm  i  pinia-plugin-persistedstate

persidt:true 可以开启持久化存储

pinia如何统一管理：

1.stores/index.ts引入持久化存储

import {createPinia} from 'pinia'
import presist from 'pinia-plugin-persistedstate'

const pinia =createPinia()
pinia.use(presist)

export default pinia

// 将user模块里面所有的按需导出
// export * from './modules/user'

2.main.ts导出pinia

import { createApp } from 'vue'
// pinia
import pinia from '@/stores'
const app = createApp(App)
app.use(pinia)

Axios请求工具：

pnpm  i  axios

utils文件夹里面新建request.ts文件：设置请求拦截器和响应拦截器

import axios from 'axios'
import type { AxiosError } from 'axios'
import {showFailToast} from 'vant'
import { userStore } from '@/stores';

//1.创建根地址和时间
const api = axios.create({
  baseURL: '',
  timeout: 10000
})


api.interceptors.request.use(
  (request) => {
    // 2.全局拦截请求发送前提交的参数
    const userStores = userStore()
    // 设置请求头
    if (request.headers) {
        if (userStores.isLogin) {
            request.headers.Authorization = `Bearer ${userStores.token}`
          }
      }
    return request
  },
)

api.interceptors.response.use(
  (response) => {
    //3.处理业务失败
    if (response.data.code === 后端规定的失败数字是多少) {
      // 这里做错误提示
      showFailToast(response.data.msg||'业务失败')
      return Promise.reject(response.data.msg)
    }
    // 4.摘取核心响应数据
    return Promise.resolve(response.data)
  },

  (error:AxiosError) => {
    // 5.处理401错误
    if (error.response?.status === 401) {
      // 清除本地信息
      // 跳转到登录页面  ,携带当前访问页面地址
        router.push({path:'/login',query:{returnUrl:router.currentRoute.value})
    }
    else {
      let message = error.message
      if (message === 'Network Error') {
        message = '后端网络故障'
      }
      else if (message.includes('timeout')) {
        message = '接口请求超时'
      }
      else if (message.includes('Request failed with status code')) {
        message = `接口${message.substr(message.length - 3)}异常`
      }

    }
    return Promise.reject(error)
  },
)

export default api


//设置类型
type Data<T> = {
  code:number,
  msg:string,
  total?: number,
  data:T,
}

type Method = 'get' | 'post' | 'put' | 'delete' | 'patch'
export const request=<T>(
  url: string,
  method: Method='get',
  submitData?: object
)=>{
  // 参数：地址，请求方式，提交的数据
  // 返回：promise
  return api.request<any,Data<T>>({
    url,
    method,
    [method.toUpperCase() === 'GET' ? 'params' : 'data'] : submitData
  })
}

打包svg图标配置：

官网地址：https://github.com/vbenjs/vite-plugin-svg-icons

pnpm install  vite-plugin-svg-icons -D

配置：vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

  createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
})

导入：main.ts

import 'virtual:svg-icons-register'

全局使用：se-icon.vue文件：



<template>
  <div>
    <svg aria-hidden="true" class="seal-icon">
      <use :href="`#icon-${name}`" />
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
defineProps<{
  name: string
}>()


</script>
<style scoped lang="less">
.seal-icon {
  width: 24px;
  height: 24px;
}

//和字体大小一样</style>

组件中使用

  <se-icon :name="`icon_touxiangbeijing`"></se-icon>

安装进度条：要安装两个命令

pnpm i nprogress
pnpm i @types/nprogress -D

vue-router.ts文件配置：

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

//去掉转圈的那个环形圈
NProgress.configure({
  showSpinner:false
})

// vue3的前置导航
router.beforeEach((to)=>{
//开启进度条
  NProgress.start()
})


router.afterEach((to)=>{
document.title=`sealtool-${to.meta.title||''}`
//关闭进度条
     NProgress.done()
})

//全局css，改变进度条颜色
#nprogress .bar {
  background-color: #f8e1f1 !important;
}

查看全文

http://www.kler.cn/a/398362.html