前言:项目使用的技术有Vite+Vue3+Ts+sass+Router+pinia+axios。好了我们开始吧。
找到你想创建的文件里文件夹里,cmd打开控制面板
npm create vite@latest
回车后输入y,再输入你项目的名字
接下来选vue
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
> Vue
React
Preact
Lit
Svelte
再是选ts回车,就创建完了。
? Select a variant: » - Use arrow-keys. Return to submit.
JavaScript
> TypeScript
Customize with create-vue
Nuxt
开发工具打开项目 npm i
下载依赖,npm run dev
就跑起来了。
说个另外的问题,页面有报错,但是不影响项目运行,像这样。鼠标悬停红色波浪线Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
解决方法:找到tsconfig.json
文件。"moduleResolution": "node",
moduleResolution的值改为node
还有在写ts语法的时候,一些变量名未使用也会报错,解决方法还是找到tsconfig.json
文件,把noUnusedLocals
的值改为false
npm install sass -D
npm i vue-router
<template>
<div @click="tologin">登录</div>
<h3>{{ store.name }}</h3>
<h4 @click="changName">修改名称</h4>
</template>
<script lang="ts" setup>
import {useStore} from '../../store/index'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any;
function login(): void {
router.push({
name: 'home'
})
// let data = {
// roleId: "A",
// username: "dpc",
// password: "dpc12345",
// sysType: "zhfw",
// }
// proxy.$post("/login", data).then((response: any) => {
// console.log(response)
// router.push({
// name: 'home'
// })
// })
}
// useRouter()useStore()我用了下面的自动引用所以没import,如果没用那两个插件乖乖import吧
const router = useRouter()
const store = useStore()
function tologin() {
// router.push({
// name: 'home'
// })
login()
}
function changName():void{
store.name = '变化'
}
</script>
<template>
<div @click="back">返回</div>
</template>
<script lang="ts" setup>
// useRouter()我用了下面的自动引用所以没import,如果没用那两个插件乖乖import吧
const router = useRouter()
function back() {
router.push({
name: 'login'
})
}
</script>
import { createRouter, createWebHistory, } from 'vue-router'
export const routes = [
{
path: '/',
redirect: '/login',
},
{
name: 'login',
path: '/login',
component: () => import("../views/login/login.vue")
},
{
name: 'home',
path: '/home',
component: () => import("../views/home/home.vue")
}
]
const router = createRouter({
scrollBehavior: () => ({ left: 0, top: 0 }),
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
next()
})
export default router
切记app.mount('#app')
要在之后,不然会出一些问题的,没错,我就遇到了
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import http from './utils/request.js';
//routes
import router from './router/index'
const app = createApp(App)
app.use(http)
//routes
app.use(router)
app.use(createPinia())
app.mount('#app')
<template>
<router-view></router-view>
</template>`
我觉这个东西还挺有意思的,两个插件提供自动引入
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts
文件,保存后会自动生成auto-import.d.ts文件+components.d.ts文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from 'unplugin-vue-components/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
//安装两行后你会发现在组件中不用再导入ref,reactive等
imports: ['vue', 'vue-router'],
//存放的位置
dts: "src/auto-import.d.ts",
}),
Components({
// 引入组件的,包括自定义组件
// 存放的位置
dts: "src/components.d.ts",
}),
],
})
npm install pinia
在 src 路径创建下 store/index.ts文件,main.ts引入,如上main.ts所示。login.vue页面已经提供测试方法,直接用
import { defineStore, acceptHMRUpdate } from "pinia";
export const useStore = defineStore({
id: "index",
state: () => ({
name: "old name",
}),
getters: {
myName: (state) => {
return `getters ${state.name}`
}
},
actions: {
changeName(name: string) {
this.name = name
}
},
});
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot))
}
npm install axios --save
在src路径下创建utils/request.ts文件,main.ts引入,如上main.ts所示。login.vue页面已经提供测试方法,直接用
此时应该是调不通的,这就涉及另外的东西了。咱先创建出来,然后自己偷偷解决
/**axios封装
* 请求拦截、相应拦截、错误统一处理
*/
import axios from 'axios';
import router from '../router/index'
// let protocol = window.location.protocol; //协议
// let host = window.location.host; //主机
// axios.defaults.baseURL = protocol + "//" + host;
axios.defaults.baseURL = '/api'
axios.interceptors.request.use( //响应拦截
async config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
config.headers.token = sessionStorage.getItem('token')
return config;
},
error => {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response); //进行中
} else {
return Promise.reject(response); //失败
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
// 自定义过期之后的操作
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
sessionStorage.clear()
break
// 404请求不存在
case 404:
break;
// 其他错误,直接抛出错误提示
default:
}
return Promise.reject(error.response);
}
}
);
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
const $get = (url: string, params: object) => {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
const $post = (url: string, params: object) => {
return new Promise((resolve, reject) => {
axios.post(url, params) //是将对象 序列化成URL的形式,以&进行拼接
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// 下面是将get和post方法挂载到vue原型上供全局使用、
// vue2.x中是通 Vue.prototype 来绑定的,像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype,推荐使用globalProperties来绑定,
export default {
install: (app: any) => {
app.config.globalProperties['$get'] = $get;
app.config.globalProperties['$post'] = $post;
app.config.globalProperties['$axios'] = axios;
}
}