hookehuyr

🎉 init: 初始化运行环境

VITE_BASE_URL = '/'
\ No newline at end of file
VITE_BASE_URL = '/rhyme/'
\ No newline at end of file
node_modules
.DS_Store
dist
dist-ssr
*.local
.history
doc
\ No newline at end of file
{
"esversion": 11,
"asi": true
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
{
"name": "vant4-template",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"start": "vite --host 0.0.0.0",
"build": "vite build",
"build-ts": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"jquery": "^3.6.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"vant": "^4.0.0-alpha.0",
"vue": "^3.2.31"
},
"devDependencies": {
"@types/jquery": "^3.5.14",
"@vitejs/plugin-vue": "^2.2.4",
"@vue/compiler-sfc": "^3.2.31",
"axios": "^0.26.1",
"less": "^4.1.2",
"pinia": "^2.0.12",
"postcss-px-to-viewport": "^1.1.1",
"qs": "^6.10.3",
"tslint": "^6.1.3",
"vite": "^2.8.6",
"vite-plugin-style-import": "1.4.1",
"vue-router": "4"
}
}
<template>
<router-view></router-view>
</template>
<script setup>
import axios from '@/utils/axios'
import { useRoute, useRouter } from 'vue-router'
import { Toast } from 'vant'
import { mainStore } from './store';
const store = mainStore();
const $router = useRouter();
</script>
<style lang="less">
html,body{
width: 100%;
height: 100%;
}
body {
position: relative;
/* --van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background: var(--van-primary-color); */
/* 全局修改主色调 */
--van-blue: #3FC9E9;
background-color: #FAFAFA;
p {
margin: 0;
padding: 0;
}
}
</style>
\ No newline at end of file
export default {
// 初始化设置
init: {
mounted () {
document.title = this.$route.meta.title;
}
}
};
\ No newline at end of file
import { createApp } from 'vue';
import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard } from 'vant';
import router from './router';
import App from './App.vue';
import axios from './utils/axios';
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
app.use(Button);
app.use(VanImage);
app.use(Col);
app.use(Row);
app.use(Icon);
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(Toast);
app.use(Uploader);
app.use(Empty);
app.use(Tab);
app.use(Tabs);
app.use(Overlay);
app.use(NumberKeyboard);
app.use(ConfigProvider);
app.config.globalProperties.$http = axios; // 关键语句
app.mount('#app');
export default [{
path: '/',
name: '首页',
component: () => import('./views/index.vue'),
meta: {
title: ''
},
children: []
}];
\ No newline at end of file
import { createRouter, createWebHashHistory } from 'vue-router';
import routes from './route.js';
// 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
history: createWebHashHistory('/index.html'),
routes
});
export default router;
\ No newline at end of file
import { defineStore } from 'pinia';
export const mainStore = defineStore('main', {
state: () => {
return {
msg: 'Hello world',
count: 0,
auth: false
};
},
getters: {},
actions: {
changeState (state: boolean) {
this.auth = state;
}
},
});
\ No newline at end of file
import axios from 'axios';
import router from '../router';
// 请求拦截器
axios.interceptors.request.use(
config => {
// 发送请求前
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.data.code === 401) { // 未授权跳转登录页
router.replace({
path: '/auth'
});
}
return response;
},
error => {
return Promise.reject(error.response.data);
});
export default axios;
import moment from 'moment';
// 格式化时间
const formatDate = (date) => {
return moment(date).format('YYYY-MM-DD HH:mm');
};
// 判断是不是桌面微信
const wxInfo = () => {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let uAgent = navigator.userAgent.toLowerCase();
let isTable = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
return {
isAndroid,
isiOS,
isTable
};
};
export { formatDate, wxInfo };
\ No newline at end of file
<template>
<div>vant template</div>
</template>
<script setup>
</script>
<script>
import mixin from 'common/mixin'
import { mainStore } from '@/store'
import { storeToRefs } from 'pinia'
export default {
mixins: [mixin.init],
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"isolatedModules": true,
"baseUrl": ".",
"allowJs": true,
"types": [
// "webpack-env",
"vite/client"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
, "src/store/index.ts"],
"exclude": [
"node_modules"
]
}
{
"defaultSeverity": "warning",
"extends": [
"tslint:recommended"
],
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"quotemark": [true, "single"],
"indent": [true, "spaces", 2],
"interface-name": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-consecutive-blank-lines": false,
"no-console": false
}
}
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import { defineConfig } from 'vite';
var path = require('path');
export default({ command, mode }) => {
let isProd = (command === 'serve'); // 情景配置是否为开发模式 serve 或 build
return defineConfig({
// root: '',
base: isProd ? '/' : '/shzl/', // 开发或生产环境服务的公共基础路径。
// mode: '', // 在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。
// define: '', // 定义全局常量替换方式。其中每项在开发环境下会被定义在全局,而在构建时被静态替换。
plugins: [ // 将要用到的插件数组。Falsy 虚值的插件将被忽略,插件数组将被扁平化(flatten)。查看 插件 API 获取 Vite 插件的更多细节。
vue(),
styleImport({
resolves: [VantResolve()],
}),
],
// publicDir: '', // 作为静态资源服务的文件夹。这个目录中的文件会在开发中被服务于 /,在开发模式时,会被拷贝到 outDir 的根目录,并没有转换,永远只是复制到这里。该值可以是文件系统的绝对路径,也可以是相对于项目的根目录路径。
// cacheDir: '', // 存储缓存文件的目录。此目录下会存储预打包的依赖项或 vite 生成的某些缓存文件,使用缓存可以提高性能。如需重新生成缓存文件,你可以使用 --force 命令行选项或手动删除目录。此选项的值可以是文件的绝对路径,也可以是以项目根目录为基准的相对路径。
resolve: {
alias: { // 将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也可以是一个对象,或一个 { find, replacement } 的数组. 当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会被原封不动地使用,因此无法被正常解析。 更高级的自定义解析方法可以通过 插件 实现。
"@": path.resolve(__dirname, "src"),
"@components": path.resolve(__dirname, "src/components"),
"@utils": path.resolve(__dirname, "src/utils"),
"@images": path.resolve(__dirname, "src/assets/images"),
"common": path.resolve(__dirname, "src/common"),
},
// dedupe: [''], // 如果你在你的应用程序中有相同依赖的副本(比如 monorepos),使用这个选项来强制 Vite 总是将列出的依赖关系解析到相同的副本(从项目根目录)。
// conditions: [''], // 在解析包的 情景导出 时允许的附加条件。
// mainFields: [''], // package.json 中,在解析包的入口点时尝试的字段列表。注意,这比从 exports 字段解析的情景导出优先级低:如果一个入口点从 exports 成功解析,主字段将被忽略。
// extensions: [''], // 导入时想要省略的扩展名列表。注意,不 建议忽略自定义导入类型的扩展名(例如:.vue),因为它会干扰 IDE 和类型支持。
},
// css: {
// modules: '', // 配置 CSS modules 的行为。选项将被传递给 postcss-modules。
// postcss: '', // 内联的 PostCSS 配置(格式同 postcss.config.js),或者一个(默认基于项目根目录的)自定义的 PostCSS 配置路径。其路径搜索是通过 postcss-load-config 实现的。 注意,如果提供了该内联配置,Vite 将不会搜索其他 PostCSS 配置源。
// preprocessorOptions: '', // 指定传递给 CSS 预处理器的选项。
// },
// json: {
// namedExports: true, // 是否支持从 .json 文件中进行按名导入。
// stringify: false, // 若设置为 true,导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好,尤其是当 JSON 文件较大的时候。 开启此项,则会禁用按名导入。
// },
// esbuild: false, //
// assetsInclude: '', // 指定其他文件类型作为静态资源处理
logLevel: 'info', // 调整控制台输出的级别,默认为 'info'。
// clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息。命令行模式下请通过 --clearScreen false 设置。
server: {
host: '0.0.0.0',
port: 8006, // 本地服务端口
// strictPort: true, // 设为true时若端口已被占用则会直接退出, 而不是尝试下一个可用端口
// https: '',
// open: false, // 在服务器启动时自动在浏览器中打开应用程序. 当此值为字符串时, 会被当作URL的路径名.
proxy: { // 代理
'/srv/': {
target: 'http://space-dev.onwall.cn',
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, '')
},
},
// cors: '', // 为开发服务器配置 CORS。默认启用并允许任何源,传递一个 选项对象 来调整行为或设为 false 表示禁用。
// force: '', // 设置为 true 强制使依赖预构建。
// hmr: '', // 禁用或配置 HMR 连接(用于 HMR websocket 必须使用不同的 http 服务器地址的情况)。 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层。
// watch: '', // 传递给 chokidar 的文件系统监视器选项。
},
build: {
outDir: 'shzl', // 指定输出路径(相对于项目根目录).
assetsDir: 'static',
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
},
input: { // 多页面应用模式
main: path.resolve(__dirname, 'index.html'),
// shzl2022: path.resolve(__dirname, 'shzl2022.html'), // router需要配置入口
}
},
},
optimizeDeps: {
// entries: '',
// exclude: [],
include: ['jquery', 'lodash', 'moment', 'axios', 'pinia', 'vue-router', 'vant'], // 默认情况下,不在 node_modules 中的,链接的包不会被预构建。使用此选项可强制预构建链接的包。
// keepNames: false, // 打包器有时需要重命名符号以避免冲突。 设置此项为 true 可以在函数和类上保留 name 属性。 若想获取更多详情,请参阅 keepNames
}
});
};
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.