vue2入门学习项目，已完成最简单的admin架构以及适配移动端方案vw，查看不同分支即可预览，使用vue-cli、webpack等构建工具具体参考分支。该项目已停止更新！
Home Page: https://github.com/chao921125/
License: GNU General Public License v3.0
持续更新各种学习内容：欢迎PR，欢迎Star
https://element-plus.org/
https://next.antdv.com/
https://www.naiveui.com/zh-CN/os-theme
https://next-material.balmjs.com/#/
https://vuestic.dev/
https://quasar.dev/
https://primefaces.org/primevue/#/
https://quatrochan.github.io/Equal/
https://oruga.io/
https://lightvue.org/
https://vuestic.dev/
https://next.vuetifyjs.com/en/
手机
https://vant-contrib.gitee.io/vant/#/zh-CN
https://ionicframework.com/docs/
https://antoniandre.github.io/wave-ui/
其他插件，可以在这个网站搜索相关插件：https://openbase.com/
拖拽、排序等等：SortableJS http://sortablejs.github.io/Sortable/
拖拽衍生自SortableJS：npm i vuedraggable
幻灯片：Swiper https://swiperjs.com/get-started
滚动条：body-scroll-lock
vue工具集
https://vueuse.org/
SSR SEO必备
https://nuxtjs.org/
优秀项目实战：
https://github.com/tobe-fe-dalao/fast-vue3
https://github.com/xiaoxian521/vue-pure-admin
https://github.com/vbenjs/vue-vben-admin
https://github.com/RainManGO/vue3-composition-admin
https://github.com/Ewall1106/vue-h5-template
https://github.com/geekskai/vue3-jd-h5
https://github.com/newbee-ltd/newbee-mall-vue3-app
const webpack = require('webpack');
const productionGzipExtensions = ['js', 'css'];
const isProd = process.env.NODE_ENV === 'production';
const CompressionPlugin = require('compression-webpack-plugin');
const cdn = {
css: [],
js: [
// 'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
// 'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
// 'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
// 'https://cdn.bootcss.com/axios/0.18.0/axios.min.js'
'https://unpkg.com/[email protected]/dist/vue.runtime.min.js',
'https://unpkg.com/[email protected]/dist/vue-router.min.js',
'https://unpkg.com/[email protected]/dist/vuex.min.js',
'https://unpkg.com/[email protected]/dist/axios.min.js'
]
};
// 引入等比适配插件
const px2rem = require('postcss-px2rem');
// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 37.5
});
module.exports = {
// publicPath: './',
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'dist',
assetsDir: 'static',
devServer: {
// 前端端口
port: 9090,
// 代理地址
proxy: {
'^/api': {
target: 'http://127.0.0.1:8080',
secure: false
}
}
},
css: {
loaderOptions: {
scss: {
// 根据自己样式文件的位置调整
data: @import "~@/assets/styles/public.scss";
},
postcss: {
plugins: [postcss]
}
},
extract: true,
sourceMap: false
},
productionSourceMap: false,
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: false
}
},
// externals: {
// vue: 'Vue',
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// axios: 'axios'
// },
configureWebpack: (config) => {
if (isProd) {
// #region cdn拆分
// 开启分离 js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\/]node_modules\/([\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return npm.${packageName.replace('@', '')};
}
}
}
}
};
// 取消webpack警告的性能提示
config.performance = {
hints: 'warning',
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
// 只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
};
config.plugins.push(new webpack.IgnorePlugin(/^./locale$/, /moment$/));
config.plugins.push(new CompressionPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: /.js$|.html$|.css$|.jpg$|.jpeg$|.png/,
threshold: 10240,
minRatio: 0.8
}));
// #endregion
// return {
// plugins: [
// new webpack.IgnorePlugin(/^./locale$/, /moment$/),
// // 配置compression-webpack-plugin压缩
// new CompressionPlugin({
// filename: '[path][base].gz',
// algorithm: 'gzip',
// test: /.js$|.html$|.css$|.jpg$|.jpeg$|.png/,
// threshold: 10240,
// minRatio: 0.8
// })
// ]
// };
}
},
chainWebpack: (config) => {
if (isProd) {
config.plugin('html').tap((args) => {
args[0].cdn = cdn;
return args;
});
}
}
};
import axios from "axios";
import { getCookie } from "./cookies";
axios.defaults.timeout = 100000;
axios.defaults.baseURL = process.env.REACT_APP_HTTP;
axios.interceptors.request.use((config) => {
config.data = JSON.stringify(config.data);
config.headers = {
"Content-Type": "application/json",
"token": getCookie("token")
};
return config;
},(error) => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
// if (response.data.errCode === 2) {
// console.log("过期");
// }
return response;
},(error) => {
console.log("request error：", error);
}
);
export function get(url: string, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
});
});
}
export function post(url: string, data: any) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(
(response) => {
resolve(response.data);
},(error) => {
reject(error);
}
);
});
}
export function patch(url: string, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data).then(
(response) => {
resolve(response.data);
},(error) => {
mssage(error);
reject(error);
}
);
});
}
export function put(url: string, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(
(response) => {
resolve(response.data);
},(error) => {
mssage(error);
reject(error);
}
);
});
}
export default function (fecth: string, url: string, param: any) {
let _data = "";
return new Promise((resolve, reject) => {
switch (fecth) {
case "get":
console.log("begin a get request,and url:", url);
get(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request GET failed.", error);
reject(error);
});
break;
case "post":
post(url, param)
.then(function (response) {
resolve(response);
})
.catch(function (error) {
console.log("get request POST failed.", error);
reject(error);
});
break;
default:
break;
}
});
}
function mssage(err: any) {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log(err.response.data.error.details);
break;
case 401:
console.log("未授权，请登录");
break;
case 403:
console.log("拒绝访问");
break;
case 404:
console.log("请求地址出错");
break;
case 408:
console.log("请求超时");
break;
case 500:
console.log("服务器内部错误");
break;
case 501:
console.log("服务未实现");
break;
case 502:
console.log("网关错误");
break;
case 503:
console.log("服务不可用");
break;
case 504:
console.log("网关超时");
break;
case 505:
console.log("HTTP版本不受支持");
break;
default:
}
}
}
/*scrollBar-face-color: green; !* 滑块 *!*/
/*scrollBar-hightLight-color: red; !* 高亮 *!*/
/*scrollBar-3dLight-color: orange; !* 3维光线 *!*/
/*scrollBar-darkshadow-color:blue; !* 暗影 *!*/
/*scrollBar-shadow-color:yellow; !* 阴影 *!*/
/*scrollBar-arrow-color:purple; !* 箭头 *!*/
/*scrollBar-track-color:black; !* 滑道颜色 *!*/
/*scrollBar-base-color:pink; !* 主要颜色 *!*/
}
/*
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色
scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色
scrollbar-base-color 设置或检索滚动条基准颜色
*/
/*滚动条样式*/
.demo-scroll::scrollbar {
width: 4px;
height: 8px;
}
/*滚动条的滑轨背景颜色*/
.demo-scroll::scrollbar-button {
background-color: #FF7677;
display: none;
}
/*滚动条背景区域颜色*/
.demo-scroll::scrollbar-track {
background: rgba(255, 255, 255, 0.7)
}
.demo-scroll::scrollbar-track-piece {
background: rgba(255, 255, 255, 0.7)
}
/*滑块颜色*/
.demo-scroll::scrollbar-thumb {
background: #00FFFF;
border-radius: 50%;
}
/*横向滚动条和纵向滚动条相交处尖角的颜色*/
.demo-scroll::scrollbar-corner {
background: #82AFFF;
display: none
}
/*定义右下角拖动块的样式*/
.demo-scroll::scrollbar-resizer {
background: #FF0BEE;
}
.demo-scroll::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.demo-scroll::-webkit-scrollbar-button {
background-color: #FF7677;
display: none
}
.demo-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.7)
}
.demo-scroll::-webkit-scrollbar-thumb {
background:#00FFFF;
border-radius: 4px;
}
.demo-scroll::-webkit-scrollbar-corner {
background: #82AFFF;
display: none
}
.demo-scroll::-webkit-scrollbar-resizer {
background: #FF0BEE;
}
</style>
'use strict';
export default {
getLocalItem(key) {
let item = localStorage.getItem(key);
if (!item) return null;
// 这点要判断是字符串还是对象
let result = /^[{\[].[}]]$/g.test(item);
if (result) {
return JSON.parse(item);
} else {
return item;
}
},
setLocalItem(key, value) {
// 这点要判断是字符串还是对象
if (typeof value === 'string') {
localStorage.setItem(key, value);
} else {
localStorage.setItem(key, JSON.stringify(value));
}
},
removeLocalItem(key) {
localStorage.removeItem(key);
},
clearLocal() {
localStorage.clear();
},
// 获取localstorage最大存储容量
getLocalMaxSpace() {
if (!window.localStorage) {
console.log('当前浏览器不支持localStorage!');
}
let test = '0123456789';
let add = function(num) {
num += num;
if (num.length === 10240) {
test = num;
return;
}
add(num);
};
add(test);
let sum = test;
let show = setInterval(function() {
sum += test;
try {
window.localStorage.removeItem('test');
window.localStorage.setItem('test', sum);
console.log(sum.length / 1024 + 'KB');
} catch (e) {
console.log(sum.length / 1024 + 'KB超出最大限制');
clearInterval(show);
}
}, 0.1);
},
// 获取使用了的localstorage的空间
getLocalUsedSpace() {
if (!window.localStorage) {
console.log('浏览器不支持localStorage');
return false;
}
let size = 0;
for (let item in window.localStorage) {
// eslint-disable-next-line no-prototype-builtins
if (window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length;
}
}
console.log('当前localStorage使用容量为' + (size / 1024).toFixed(2) + 'KB');
return true;
},
getSessionItem(key) {
let item = sessionStorage.getItem(key);
if (!item) return null;
// 这点要判断是字符串还是对象
let result = /^[{\[].[}]]$/g.test(item);
if (result) {
return JSON.parse(item);
} else {
return item;
}
},
setSessionItem(key, value) {
// 这点要判断是字符串还是对象
if (typeof value === 'string') {
sessionStorage.setItem(key, value);
} else {
sessionStorage.setItem(key, JSON.stringify(value));
}
},
removeSessionItem(key) {
sessionStorage.removeItem(key);
},
clearSession() {
sessionStorage.clear();
},
// 获取sessionStorage最大存储容量
getSessionMaxSpace() {
if (!window.sessionStorage) {
console.log('当前浏览器不支持sessionStorage!');
}
let test = '0123456789';
let add = function(num) {
num += num;
if (num.length === 10240) {
test = num;
return;
}
add(num);
};
add(test);
let sum = test;
let show = setInterval(function() {
sum += test;
try {
window.sessionStorage.removeItem('test');
window.sessionStorage.setItem('test', sum);
console.log(sum.length / 1024 + 'KB');
} catch (e) {
console.log(sum.length / 1024 + 'KB超出最大限制');
clearInterval(show);
}
}, 0.1);
},
// 获取使用了的sessionStorage的空间
getSessionUsedSpace() {
if (!window.sessionStorage) {
console.log('当前浏览器不支持sessionStorage');
return false;
}
let size = 0;
for (let item in window.sessionStorage) {
// eslint-disable-next-line no-prototype-builtins
if (window.sessionStorage.hasOwnProperty(item)) {
size += window.sessionStorage.getItem(item).length;
}
}
console.log('当前sessionStorage使用容量为' + (size / 1024).toFixed(2) + 'KB');
return true;
},
getAll() {},
// eslint-disable-next-line no-unused-vars
key(n) {},
// eslint-disable-next-line no-unused-vars
forEach(cb) {},
// eslint-disable-next-line no-unused-vars
has(key) {},
deleteAllExpires() {},
setItem(key, value) {
// 这点要判断是字符串还是对象
if (typeof value === 'string') {
localStorage.setItem(key, value);
sessionStorage.setItem(key, value);
} else {
let item = JSON.stringify(value);
localStorage.setItem(key, item);
sessionStorage.setItem(key, item);
}
},
getItem(key) {
let item = sessionStorage.getItem(key) || localStorage.getItem(key);
if (!item) return null;
// 这点要判断是字符串还是对象
let result = /^[{\[].*[}]]$/g.test(item);
if (result) {
return JSON.parse(item);
} else {
return item;
}
},
removeItem(key) {
sessionStorage.removeItem(key);
localStorage.removeItem(key);
},
clear() {
sessionStorage.clear();
localStorage.clear();
}
};
由于更新包太高，请将VUE降级到2.x版本，其余对应包请酌情解决。
涉及后续版本迭代更新，请切换指定分支更新代码。近段时间不再更新相关代码。
export function setCookie(cname: string, cvalue: any, exdays?: number) {
if (!cname) { cname = ""; }
if (!cvalue) { cvalue = ""; }
if (!exdays) { exdays = 1; }
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
const expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + JSON.stringify(cvalue) + "; " + expires;
}
export function getCookie(cname: string) {
if (!cname) { return ""; }
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(name) === 0) { return c.substring(name.length, c.length); }
}
return "";
}
vue-vite
vue-vite-ts
react-vite-ts
react-vite
vue-basic 不做更改vue-cli，去除所有vite相关分支以及ts
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.