❤ 项目搭建
一、项目信息
Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript（一）yarn 版本控制
项目地址：
二、项目搭建
（1）创建项目
yarn create vite <ProjectName> --template vue
yarn install //安装依赖
yarn dev //运行项目
可以看到项目已经给我们进行了一些基础配置：
三、安装配置
1、使用router 路由 Vue Router
yarn add vue-router@4 --save
router 文件夹下新建 index.ts，配置路由
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
{
path: "/", // 默认路由 home页面
component: () => import("../views/home/index.vue"),
},
];
// 2.返回一个 router 实列，为函数，配置 history 模式
const router = createRouter({
history: createWebHistory(),
routes,
});
// 3.导出路由 去 main.ts 注册 router.ts
export default router
3、 在main.ts中引用router下的index.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
const app = createApp(App)
app.use(router).mount('#app')
4、app.vue中添加路由组件router-view
<template>
<router-view></router-view>
</template>
2、 使用pinia 存储数据
1、安装
yarn add pinia
2、引入
修改main.ts，引入pinia提供的createPinia方法，创建根存储
import { createPinia } from 'pinia' // 引入pinia
app.use(createPinia()).use(router).mount('#app') //挂载
3、配置环境变量（开发环境和生产环境）
（1） 配置
通常来说，不同的环境会有不同的请求api接口，这就需要修改配置，才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值
环境变量文件(.env)
在项目根目录（和src同级）中创建三个文件：
注意：在vite构建工具下配置,就得使用VITE的前缀名
.env.development
#【开发环境】
NODE_ENV = 'development'
VITE_APP_BASE_API = '你的地址'
.env.staging
# 【测试环境】
NODE_ENV = 'staging'
VITE_APP_BASE_API = '你的地址'
.env.production
# 【生产环境】
NODE_ENV = 'production' //李敏啊
VITE_API_BASE_URL = '你的地址'
（2）环境变量定义与获取
webpack下环境获取是这样子：
process.env.VUE_APP_API_BASE_URL
vite下更改为
import.meta.env.VITE_API_BASE_URL
在vite.config.js中自定义环境变量前缀及获取环境变量的配置
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");
export default defineConfig(({command, mode }) => {
const env = loadEnv(mode, process.cwd())
console.log(env.VITE_APP_BASE_API) // 获取环境变量
return {
plugins: [vue()],
envPrefix: ['VITE', 'VUE'], // 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量
define: {
'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API),
},
}
})
package.json多环境配置
"scripts": {
"dev": "vite", // 开发环境
"serve": "vite preview", // 本地预览
"staging": "vite build --mode staging", // 测试环境打包
"build": "vite build", // 生产环境打包
},
4、配置Vite
Vite 配置代理 Proxy，解决跨域
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// vite 相关配置
export default defineConfig({
server: {
host: true, //host设置为true才可以使用network的形式，以ip访问项目
port: 8808, // 端口号
https: false,
open: false, // true 自动打开浏览器自动打开浏览器
cors: true, // 跨域设置允许
strictPort: true, // 如果端口已占用直接退出
proxy: {
'/edu-pc': {
target: 'http://要链接的后台地址', //线上版本
changeOrigin: true,
rewrite: (path) => path.replace(/^\/接口统一前缀/, '/接口统一前缀c')
},
},
},
plugins: [
vue(),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
})
5、项目配置axios
（1）安装使用axios
npm install axios
（2）封装axios请求 为 request.js
创建request.js ( src => utils => request.js )
import axios from 'axios'
const service = axios.create({
//baseURL: process.env.VUE_APP_BASE_API, //webpack使用 这里不生效
import.meta.env.VITE_APP_BASE_API, //.env中的VITE_APP_API参数
timeout: 5000,
})
// request 拦截器
service.interceptors.request.use(
config => {
// 在这里可以设置请求头、请求参数等return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
// 在这里处理返回数据const { data } = response
if (data.code !== 200) {
console.error('Error:', data.message)
return Promise.reject(newError(data.message || 'Error'))
} else {
return data
}
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 暂不采用
// 封装具体的请求方法: 四种请求类型不和下面的3和4标题内容放在一起
export const get = (url, params) => {
return service .get(url, { params });
};
export const post = (url, data) => {
return service .post(url, data);
};
export const put = (url, data) => {
return service .put(url, data);
};
export const delete= (url, data) => {
return service .delete(url, data);
};
export default service
（3）在api文件中使用
//导入
import request from '@/utils/request.js'
//使用
export function getWebsiteTheme(params) {
return request({
url: '你的接口名字',
method: 'get',
params
})
}
（4）在代码中使用封装好的 axios 请求
import {getWebsiteTheme} from "@/api/common/index.js";
import { ref,onMounted, onUnmounted } from 'vue'
onMounted(()=>{
console.log('我是pc界面');
getWebsiteThemefun();
})
const getWebsiteThemefun=()=>{
getWebsiteTheme().then((res)=>{
console.log(res,'请求接口返回');
})
}
使用成功！
接口返回
（5）为接口配置token
需求描述：
有些接口是非开放的，涉及到用户的个人隐私和信息等必须登录才能使用，这时候就需要验证用户的本地token信息，借助token来实现用户一段时间的免登录和接口的使用
6、项目Element Plus 配置
安装使用Element Plus
npm install element-plus --save
7、vue3导出PDF配置和使用
8、Vue中嵌入html页面并相互通信
html的页面是单独的一个服务，有自己独立的端口地址
可以通过将src中修改需要展示的页面地址，这样做的好处是vue与iframe之间不需要通信，与后端的通信可以直接通过js发请求与后端进行交互
（1）
<iframe src="http://127.0.0.1:8081/demo31.html" width="100%" height="800px" scrolling="auto"></iframe>
（2）
<iframe src="/static/gantt/test.html" ref="iframe" width="100%" height="900px" scrolling="no"></iframe>
四、打包发布
配置打包发布
打包
yarn build
预览
yarn run preview
修改提交内容包含打包好的文件
在 .gitignore文件中把dist删掉或者注释掉，才能上传dist文件（打包好的文件）到远程仓库
选择部署的分支dist
已开启 Gitee Pages 服务，网站地址： http://lourance.gitee.io/ltbvue
进行中…
（其他 ）项目非必需
添加husky
husky 是一个 Git Hook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验，也可以避免多人合作时代码格式化不统一造成的冲突；
1.安装 husky，lint-staged
npm i -D husky lint-staged
2.在package.json中新增如下配置
{
...
"scripts": {
...
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,md}": [
"prettier --write",
"git add"
]
},
"dependencies": {
...
},
"devDependencies": {
...
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
持续更新中…
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
