路由篇router/index.ts的写法和ES6router/index.js一样import{createRouter,createWebHashHistory}from"vue-router"importHomefrom'../views/Home.vue'constroutes=[{path:'/',name:'Home',component:Home}]constrouter=createRouter({history:createWebHashHistory(),routes})exportdefaultrouter但在main.ts中不同'element-plus'import'element-plus/dist/index.css'constapp=createApp(App)app.use(router).use(ElementPlus).mount('#app')this.$route改成import{useRoute}from"vue-router";const$route=useRoute()页面布局应该支持页面布局的高度。之前的处理方式是给html、body、#app设置height:100%，现在直接给el-容器只能设置height:100vh。.el-container,.el-aside{height:100vh;}使用scssnpminstallsass-S解决Vue中/deep/invalid问题ScssSyntaxError:SassError:expectedselector.?/deep/.el-table__body{}已解决在vue中，深度选择器>>>、/deep/和::v-deep是>>>的别名，在scss中无法识别/deep/，可以使用::v-deep图标用法#NPM$npminstall@element-plus/icons-vue//main.ts//如果您使用CDN，请删除此行。import*asElementPlusIconsVuefrom'@element-plus/icons-vue'constapp=createApp(App)for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)}导出导入模块文章介绍tsimport*asoverviewJsfrom'./ts/overview'ines6simplyimportoverviewJsfrom'./js/overview'exporttses6措辞exportdefault{getAllCitys,changeCitys,changePlace,getOverview,...toRefs(data),resetData}Typescript新写法：不能在export中使用...expansion，很简单的问题把export{data,changeCitys,changePl复杂化了ace,getOverview,resetData,getAllCitys}参考页面：（不导入toRefs，数组不会触发响应）mapkeyes6写法：window._AMapSecurityConfig={securityJsCode:'xxxxx'}在main.js下面ts写法：写在main.ts下面会报错，应该写在index.html下面项目根目录引用JS插件报错项目使用vue3.X.0+TypeScript，但是由于引用了很多js插件（vue-cloud，vue-simple-uploader），所以编译的时候会出问题。为了解决这个问题，这里介绍一个特别简单方便的方法。工程建起来的时候会带这么一个文件：进去加上这么一行代码随便引用。watch监控属性一定要写在函数里，不能直接写在参数里})watch监听器对象属性必须写在函数中，不能直接写在参数中，类似watch(selectParams.value.uploadtime,val=>{})Vue3+ts@而不是srcvite中的import{defineConfig}from'。config.tsvite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'//vitejs.devexportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':resolve(__dirname,'src')}},})添加baseUrl和路径到tsconfig.json{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"],"#/*":["types/*"]},"target":"esnext","useDefineForClassFields":true,"module":"esnext","moduleResolution":"node","strict":true,"jsx":"preserve","sourceMap":true,"resolveJsonModule":true,"isolatedModules":true,"esModuleInterop":true,"lib":["esnext","dom"],"skipLibCheck":true},"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"引用“：[{“路径”：“./tsconfig.node.json”}]}
