电子商务网站建设的一般过程,python做网站优势,vue做单页面网站,福州医社保增减员在什么网站做脚手架创建项目#xff1a;
pnpm create vue Cd 项目名称安装依赖#xff1a;Pnpm iPnpm Lint#xff1a;修复所有文件风格 #xff0c;不然eslint语法警告报错要双引号Pnpm dev启动项目 拦截错误代码提交到git仓库#xff1a;提交前做代码检查
pnpm dlx husky-in…脚手架创建项目
pnpm create vue Cd 项目名称安装依赖Pnpm iPnpm Lint修复所有文件风格 不然eslint语法警告报错要双引号Pnpm dev启动项目 拦截错误代码提交到git仓库提交前做代码检查
pnpm dlx husky-initpnpm install
目录调整 访问权限控制router.ts
前置守卫
import { userStore } from /stores;
// vue3的前置导航
router.beforeEach((to,from){
// next现在可选next()放行 next‘/login’跳转指定路由路径
// 返回false取消
// 返回true|undefined放行
// 返回路由地址对象格式重定向//获取token的
const storeuserStore()
// 白名单不需要登陆的页面可以直接访问
const wihteList[/login,register]
// 如果没有token并且没有白名单就重定向到登陆页面
if(!store.token!wihteList.includes(to.path)) return /login})
后置守卫页面标题
router.afterEach((to){document.titlesealtool-${to.meta.title||}
})
type文件定义vue-router.d.ts文件类型
import vue-routerdeclare 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; }
使用变量的方法: colorvar(变量名字) 覆盖vant主题色方法 持久化
pnpm i pinia-plugin-persistedstate persidt:true 可以开启持久化存储 pinia如何统一管理
1.stores/index.ts引入持久化存储
import {createPinia} from pinia
import presist from pinia-plugin-persistedstateconst 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.messageif (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 DataT {code:number,msg:string,total?: number,data:T,
}type Method get | post | put | delete | patch
export const requestT(url: string,method: Methodget,submitData?: object
){// 参数地址请求方式提交的数据// 返回promisereturn api.requestany,DataT({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.tsimport { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from pathcreateSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), src/icons)],
})
导入main.ts
import virtual:svg-icons-register
全局使用se-icon.vue文件
templatedivsvg aria-hiddentrue classseal-iconuse :href#icon-${name} //svg/div
/templatescript setup langts
import { ref, reactive, toRefs, onMounted } from vue
defineProps{name: string
}()/script
style scoped langless
.seal-icon {width: 24px;height: 24px;
}//和字体大小一样/style
组件中使用 se-icon :nameicon_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.titlesealtool-${to.meta.title||}
//关闭进度条NProgress.done()
})//全局css改变进度条颜色
#nprogress .bar {background-color: #f8e1f1 !important;
}
