一,创建vite项目
1. Vite 项目
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
使用 NPM:
$ npm init vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
- 构建项目
- 安装依赖
npm install
- 运行项目
npm run dev
二,项目初始配置
(一)路由配置
1. 引入路由
- 下载依赖
npm install vue-router
- main.ts
// 引入路由
import router from './router'
- /src/router.index.ts
// 引入需要的模块
import { createRouter, createWebHistory } from 'vue-router'
// 下面使用了es6的对象增强写法,命名必须是routes
const routes = [
{
path: '/',
redirect: 'home'
},
{
path: '/home',
component: () => import('@/views/home/index.vue')
},
{
path: '/login',
// 已经配置了路径别名,@/view 就可以写成 view
// 配置了extensions,login.vue可以写成login
component: () => import('@/views/login/index.vue')
}
]
// 创建路由
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出路由
export default router
(二)vuex
1. vuex配置
- 下载依赖
npm install vuex
- /src/store/index.ts
import { createStore } from 'vuex'
declare let SessionStorage: any;
const store = createStore({
state: {
isLogin: false
},
mutations: {
setUser (state, value) {
console.log("store user:", value);
state.isLogin = value;
}
},
actions: {
},
modules: {
}
});
export default store;
- main.ts
// vuex
import store from './store'
app.use(store)
2. 具体使用
import store from "@/store";
const login = ref(store.state.isLogin); // 使用变量
store.commit("setUser", false); // 调用方法
(三)axios
1. axios配置
- 下载依赖
npm install vuex
- /src/utils/request.ts
import axios from "axios";
import NProgress from "nprogress";
import router from "@/router";
import config from "../../config/index";
// import { getToken } from '@/utils/auth'
import { getCookie, delCookie, getStore, removeStore } from "./util"; // 引入工具包的getCookie
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
baseURL: config.mainApi,
timeout: 5000 // 超时时间5秒
});
// 设置post请求头
(service.defaults.headers.post["Content-Type"] =
"application/json;charset=utf-8"), // 服务器/格式/字符集
// http request 拦截器,通过这个,把token传到后台
service.interceptors.request.use(
config => {
const token = getCookie("VUE_ADMIN_TOKEN"); // 调用 util 包进行按key取出需要的 cookie
config.headers = {
"admin-token": `${token || ""}` // 请求头带上jwt的token
};
return config; // 正确返回token
},
err => {
return Promise.reject(err); // 错误返回
}
);
service.interceptors.response.use(
response => {
// 进度条开启代码
NProgress.start();
const res = response.data;
// 进度条关闭代码
NProgress.done();
return res;
},
error => {
const err = error.response.data;
if (err.errCode === 401) {
delCookie('VUE_ADMIN_TOKEN')
router.push({ path: "/401" }); // cookie 失效后跳转回登录
}
// return Promise.reject(error.message)
return Promise.reject(err);
}
);
export default service;
- /src/api/login.ts
import request from '@/utils/request'
export function login(data: Object) {
return request({
url: '/admin/auth/login',
method: 'post',
data
})
}
export function info(data: Object) {
return request({
url: '/vue-admin-template/user/info',
method: 'get',
params: data
})
}
export function logout() {
return request({
url: '/vue-admin-template/user/logout',
method: 'post'
})
}
// 获取验证码
export function captcha() {
return request({
url: '/admin/auth/captcha',
method: 'get'
})
}
2. 具体使用
import {defineComponent, onMounted, ref, reactive, toRef} from 'vue';
import { login, info, logout, captcha } from '@/api/login'
import { useRouter } from 'vue-router'
export default defineComponent({
setup() {
const router = useRouter()
const loginReq = () => {
console.log('退出')
store.commit("setUser", true);
ElMessage({
type: 'success',
message: '登录成功'
});
router.push({
path: '/'
})
login().then((res: any) => {
console.log(res)
})
}
return {
loginReq
}
}
})
三, 环境配置
(一)开发环境
- .env.development
## 开发环境
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV=development
# base api
VITE_APP_BASE_API = 'dev'
(二)生产环境
- .env.production
## 生产环境
NODE_ENV=production
# base api
VITE_APP_BASE_API = 'production'
(三)匹配环境
- /config/index.ts
const config: any = {
dev: {
mainApi: 'http://192.168.2.4:8085'
},
production: {
mainApi: 'http://192.168.2.4:8085'
}
}
export default config[import.meta.env.VITE_APP_BASE_API || 'dev']
(四)具体使用
import config from "../../config/index";
baseURL: config.mainApi,
四,vite.config文件配置
1. 配置config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, 'src'),
'views': '@/views',
'assets': '@/assets',
'common': '@/common',
'components': '@components',
'network': '@/network',
'router': '@/router',
'store': '@/store'
},
// 省略文件后缀
extensions: ['', '.js', '.json', '.vue', '.scss', '.css', '.ts', '.tsx']
},
server: {
// 修改端口
port: 9696
}
})
五,第三方依赖引入
(一)Element Plus
1. 安装依赖
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
- main.ts
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
- 使用
<template>
<el-config-provider :size="size" :z-index="zIndex">
<app />
</el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
export default defineComponent({
components: {
ElConfigProvider,
},
setup() {
return {
zIndex: 3000,
size: 'small',
}
},
})
</script>
(二) 第三方引入报红
1. ts语法错误
- /src/@type/vue-slick-carousel/index.d.ts
declare module "vue-slick-carousel"
六,功能实现
**注意:**setup 是旧的写法
1. 具体业务代码
<template>
<div class="test">
{{ text }}
</div>
</template>
<script lang="ts">
import { onMounted, ref } from 'vue';
export default ({
setup() {
const text = ref('业务代码');
onMounted(() => {
});
return {
text
}
},
})
</script>
<style lang="scss" scoped>
.test {
font-size: 16px;
}
</style>