目录
一、搭建准备
- VScode/HBuilder/等任何一种前端开发工具
- node.js&npm&cnpm&yarn本地开发环境
二、安装 vite并创建vue项目
1、安装 vite
npm install create-vite-app -g
2、新建vue项目
npm create vite@latest
√ Project name: ... test
√ Select a framework: » Vue
√ Select a variant: » TypeScript
# 安装依赖
npm install
# 运行
npm run dev
3.配置 vite
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
const pathResolve = (dir: string) => {
return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
'/@': pathResolve('./src/')
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: { alias },
server:{
port: 8080, // 端口号g
open: true, // 运行自动打开浏览器
}
})
4、解决报错
①、找不到模块“./App.vue”。你的意思是要将 “moduleResolution” 选项设置为 “node”,还是要将别名添加到 “paths” 选项中?
在项目根目录找到tsconfig.json
和tsconfig.node.json
文件修改moduleResolution值为node
"moduleResolution": "node"
②、allowImportingTsExtensions报错
原因:该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名,它的取值可以是 true 或 false。但是,从 TypeScript 3.8 开始,这个选项已经被废弃了
解决方法:删除tsconfig文件中的"allowImportingTsExtensions": true,
③、找不到模块“./App.vue”或其相应的类型声明。
原因:TypeScript编译器不支持处理 .vue 结尾的文件
解决方法:在项目根目录添加 shim.d.ts 文件
// 声明文件,*.vue 后缀的文件交给 vue 模块来处理
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}
④、找不到模块 “path“ 或其相对应的类型声明。
解决办法:npm install @types/node --save-dev
三、安装 element-plus并引入
1、安装 element-plus
npm install element-plus --save
2、引入 Element Plus
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");
四、安装 sass sass-loader
1、安装sass
npm install sass sass-loader --save-dev
五、安装 vue-router-next并配置
1、安装 vue-router-next
npm install vue-router@4 --save
2、搭建router模块
在src下创建router目录,并创建index.ts
文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const staticRoutes: Array<RouteRecordRaw> = [
{
path: "/",
name: "home",
component: () => import("/@/views/layout/index.vue"),
redirect: "/home",
meta: {
title: "首页",
},
children: [
{
path: "/home",
name: "home",
component: () => import("/@/views/home/index.vue"),
meta: {
title: "首页",
},
},
],
},
{
path: "/login",
name: "login",
component: () => import("/@/views/login/index.vue"),
meta: {
title: "登陆",
},
},
{
path: "/:pathMatch(.*)",
redirect: "/",
},
];
const router = createRouter({
history: createWebHashHistory(),
routes: staticRoutes,
});
export default router;
在main.ts
中引入
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
const app = createApp(App);
app.use(ElementPlus);
app.use(router)
app.mount("#app");
六、安装pinia并配置
1、安装pinia
npm install pinia
2、搭建Pinia模块
在src下创建store目录,并创建index.ts
文件
// 引入pinia 并解构出创建pinia的方法
import { createPinia } from 'pinia'
// 创建pinia
const pinia = createPinia();
// 导出pinia
export default pinia
在main.ts
中引入
import { createApp } from "vue";
import App from "./App.vue";
import "./style.css";
import router from "./router";
import pinia from "./stores";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";
const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.use(pinia)
app.mount("#app");
七、安装axios并配置
1、安装axios
npm install axios
2、配置axios模块
在src下创建utils目录,并创建request.ts
文件
import axios, { AxiosInstance } from 'axios';
// 配置新建一个 axios 实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_URL, // 请求地址
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
});
// 导出 axios 实例
export default service;
在根目录下新建.env.development
(本地环境)、.env.production
(线上环境)配置axios请求地址
.env.development
(本地环境)
# 本地环境
ENV = development
# 本地环境接口地址
VITE_API_URL = http://localhost:8888/
.env.production
(线上环境)
# 线上环境
ENV = production
# 线上环境接口地址
VITE_API_URL = https:192.168.1.1 //请求路径
八、安装js-cookie并配置
1、安装js-cookie
npm install --save js-cookie
2、配置js-cookie模块
在utils目录下新建storage.ts
文件
import Cookies from 'js-cookie';
/**
* window.localStorage 浏览器永久缓存
* @method set 设置永久缓存
* @method get 获取永久缓存
* @method remove 移除永久缓存
* @method clear 移除全部永久缓存
*/
export const Local = {
// 查看 v2.4.3版本更新日志
setKey(key: string) {
// @ts-ignore
return `${__NEXT_NAME__}:${key}`;
},
// 设置永久缓存
set<T>(key: string, val: T) {
window.localStorage.setItem(Local.setKey(key), JSON.stringify(val));
},
// 获取永久缓存
get(key: string) {
let json = <string>window.localStorage.getItem(Local.setKey(key));
return JSON.parse(json);
},
// 移除永久缓存
remove(key: string) {
window.localStorage.removeItem(Local.setKey(key));
},
// 移除全部永久缓存
clear() {
window.localStorage.clear();
},
};
/**
* window.sessionStorage 浏览器临时缓存
* @method set 设置临时缓存
* @method get 获取临时缓存
* @method remove 移除临时缓存
* @method clear 移除全部临时缓存
*/
export const Session = {
// 设置临时缓存
set<T>(key: string, val: T) {
if (key === 'token') return Cookies.set(key, val);
window.sessionStorage.setItem(Local.setKey(key), JSON.stringify(val));
},
// 获取临时缓存
get(key: string) {
if (key === 'token') return Cookies.get(key);
let json = <string>window.sessionStorage.getItem(Local.setKey(key));
return JSON.parse(json);
},
// 移除临时缓存
remove(key: string) {
if (key === 'token') return Cookies.remove(key);
window.sessionStorage.removeItem(Local.setKey(key));
},
// 移除全部临时缓存
clear() {
Cookies.remove('token');
window.sessionStorage.clear();
},
};