Open
Description
🧐 as the img, i can not debug in chrome
💻 Sample code
file : data-picker.vue
<script type="text/babel" lang="tsx" name="DataPicker">
import { reactive, ref, toRefs } from 'vue'
import { isArray } from '../../utils/methods/types';
export default {
props: {
placeholder: {
type: String,
default: '请输入'
},
label: {
type: String
},
clearable: {
type: Boolean,
default: true
},
shortcuts: {
type: Array,
default: ()=> [],
},
},
setup(props: any) {
debugger
// const state = reactive({
// inputVal: ''
// })
const value2 = ref('')
const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)] // '12:00:00', '08:00:00'
const scopeShortcuts = ref([
])
const mergeShortcuts = computed(()=> {
debugger
if(props.shortcuts && isArray(props.shortcuts) && props.shortcuts.length>0) {
return props.shortcuts
} else {
return scopeShortcuts
}
})
return { value2, defaultTime2,mergeShortcuts }
},
render() {
debugger
return (
<el-date-picker
vModel={this.value2}
type="datetimerange"
shortcuts={this.mergeShortcuts}
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
default-time={this.defaultTime2}
/>
)
}
}
</script>
<style scoped></style>
🚑 Other information config
// vite.config.ts
{
// 静态资源基础路径 base:"./":"/"
base: './',
envDir: './env', //这里使用相对路径，绝对路径其实也可以（环境变量配置的文件路径）
envPrefix: ['VITE', 'VENUS'], //vite默认只加载VITE（设置prefix可识别其他配置项）
plugins: [
vue({ reactivityTransform: true }),
vueJsx(),
// 自动引入compostitionApi和全局typescript说明
autoImport({
resolvers: [ElementPlusResolver()],
include: [
/\.[t]sx?$/, //匹配.ts,.tsx,.js,.jsx
/\.vue$/,
/\.vue\?vue/, //.vue
/\.md$/ //.md
],
imports: ['vue', 'vue-router'], //自动导入vue和vue-router相关方法
dts: 'src/auto-imports.d.ts' //生成auto-import.d.ts 全局声明
}),
componentsVite({
resolvers: [ElementPlusResolver()],
dts: 'src/components-imports.d.ts', //生成components-import.d.ts 全局声明
dirs: ['src/components'] //按需加载的文件夹
}),
visualizer({
open: true, //设置为 true,否则无效
gzipSize: true,
brotliSize: true
}),
resolveExternalsPlugin({ AMap: 'AMap' }),
// 需要时可以放开，这里暂时没有调用
viteCompression({
// 生成压缩包gz
verbose: true, //输出压缩成功
disable: false, // 是否禁用
threshold: 10240, // 体积大于阈值会被压缩，单位是b
algorithm: 'gzip', // 压缩算法
ext: '.gz' // 生成的压缩包后缀
})
],
// 强制预构建插件包
optimizeDeps: {
include: ['axios']
},
css: {
// css预处理器
preprocessorOptions: {
less: {
chartset: false,
modifyVars: {
// 全局less变量存储路径(配置less的全局变量)
hack: `true; @import (reference) "${path.resolve('src/styles/common.less')}";`
},
javascriptEnabled: true
}
},
postcss: {
plugins: [
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: (atRule: any) => {
// 去除elementPlus内部charset警告
if (atRule.name === 'charset') {
atRule.remove()
}
}
}
}
]
}
},
build: {
sourcemap: mode === 'prod' && command === 'build', //是否构建source map 文件
outDir: 'dist', //指定输出路径
assetsDir: 'assets', //指定静态资源存放路径
chunkSizeWarningLimit: 1000,
cssCodeSplit: true, //提取css一个文件
emptyOutDir: true, //打包前先清空原有打包文件
// 生产情况下清空console
// minify: 'terser',Vite3需要单独安装插件
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
ie8: true,
output: { comments: true } // 删除注释
},
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html')
},
compact: true,
// 拆分代码，按需加载
manualChunks: {
vue: ['vue', 'vue-router']
},
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
},
brotliSize: false // 不统计
}
},
...
}
// tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
"importHelpers": true,
"sourceMap": true,
...
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/auto-imports.d.ts",
"./commitlint.config.ts",
"./config",
".eslintrc.js",
],
"exclude": [
"node_modules",
"dist",
"**/*.js"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
// components-imports.d.ts
declare module '@vue/runtime-core' {
export interface GlobalComponents {
...,
TableCustom: typeof import('./components/tableCustom/index.vue')['default']
TmsDataPicker: typeof import('./components/TMSBase/tms-data-picker.vue')['default']
TmsNumberInput: typeof import('./components/TMSBase/tms-number-input.vue')['default']
}
}