Vue3和Vue2使用ElementPLUS的不同及替代方案(TypeScript篇)

路由篇

• router/index.ts同ES6的router/index.js写法相同

import { createRouter, createWebHashHistory } from "vue-router"
import Home from '../views/Home.vue'
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

但main.ts中不同

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index' // ES6中是import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = 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-container设置height:100vh，才可以。

.el-container,
.el-aside {
  height: 100vh;
}

• 使用scss

npm install sass -S

• 解决Vue Scss中/deep/无效问题
  Syntax Error: SassError: expected selector.

  ╷

  /deep/ .el-table__body{}

​ 解决
​ 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep

• 图标用法

# NPM
$ npm install @element-plus/icons-vue

// main.ts

// if you're using CDN, please remove this line.
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

  <el-icon :size="size" :color="color">
      <SwitchButton />
  </el-icon>

导出导入模块篇

• 引入ts

import * as overviewJs from './ts/overview'

在es6中简单 
import overviewJs from './js/overview'

• 导出ts

es6写法
export default {
  getAllCitys,
  changeCitys,
  changePlace,
  getOverview,
  ...toRefs(data),
  resetData
}

typescript新写法: 
不能在export里面用...展开式, 真的简单问题复杂化
export {
  data,
  changeCitys,
  changePlace,
  getOverview,
  resetData,
  getAllCitys
}
引用页中: (不用toRefs引入, 数组不会触发响应式)
let {
  citys,
  places,
  placeList,
  regionIdCas,
  placeTypeIdCas,
  checkCityIds,
  checkPlaceIds
} = toRefs(data)

高德地图篇

• 配置高德地图密钥

​ es6写法: main.js最下方

window._AMapSecurityConfig = {
  securityJsCode: 'xxxxx'
}

​ ts写法: main.ts下方写会报错, 应该写在项目根目录下index.html中

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'xxxxxxxx',  // 高德地图密钥
    }
</script>

引用JS插件报错

项目用的是vue3.X.0 + TypeScript，但由于也引用了不少js插件（vue-cloud、vue-simple-uploader），所以在编译时会出问题。为了解决这一问题，这里有一个特别简单便利的方法。

建项目时会自带这样一个文件：

进去加这样一行代码就可以随意引用了。

watch监听属性必须写在函数中, 不能直接写在参数中

const selectParams = ref({
  uploadtime: []
})

watch(() => selectParams.value.uploadtime, val => {
  console.log(val)
})

watch监听对象属性必须写在函数中, 不能直接写在参数中, 类似watch(selectParams.value.uploadtime, val => {

})

Vue3+ts @代替src
vite.config.ts中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// vitejs.dev
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': resolve(__dirname, 'src') } },
})

tsconfig.json中 加上baseUrl和paths

{
  "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"],
  "references": [{ "path": "./tsconfig.node.json" }]
}