使用 Vue3.0 + Element Plus + TS/TSX

--------------------------------- Vue3.0 问题

1. 路由：配置404 

 {

    path: "/:catchAll(.*)",

    name: "NotFound",

    component: () =>

      import("../views/NotFound.vue")

  }

2.表单的双向绑定：
   a: input输入不显示： form表单的ref 跟 setup表单对象重名导致

    

      :model="ruleForm"

      status-icon

      label-width="100px"

      class="demo-ruleForm"

    >

      

        

      

      

        

      

    

    const ruleForm = ref({  // 为啥用ref 不用reactive不明白哎

        email: '',

        pass: '',

    })

    return {

        ruleForm

    };

生产环境ctx就没法用了 表单验证会报错 我改了下
const loginForm = ref(null)
const handleLogin = () = {
const form = unrefany(loginForm)
form.validate((valid: boolean) = {
if (valid) {
alert(submit!);
} else {
console.log(error submit!!);
return false;
}
});
}
return {
loginForm,
handleLogin
}
这样写应该就没啥问题了

3. setup函数中绑定dom元素：

    ruleForm1">...

    const ruleForm1 = ref(null);

    const handleClick = () => {

      try {

        (ruleForm1.value as HTMLFormElement).validate((vali: boolean) => {

          if(vali) {

            console.log('ruleForm', ruleForm)

          }

        })

      } catch (err) {

        console.log('err', err)

      }

    };

    return {

      ruleForm,

      rules,

      ruleForm1,

      handleClick,

    };

4.隐式拥有 "any" 类型的报错：

第一种：引用文件报错

import data from "@/common/mockData.js"

无法找到模块“@/common/mockData.js”的声明文件。“e:/000000721/vue3.0/vue3-elementplus-demo-01/src/common/mockData.js”隐式拥有 "any" 类型。ts(7016)

 解决方法:

第一步.跟目录创建index.d.ts

declare module '@/common/mockData.js' {

    const data: any;

    export default data;

}

第二步.tsconfig.js:

  "include": [

    "index.d.ts"

  ],

 不推荐的一种解决方案：
 tsconfig.js新增一条:
        "noImplicitAny": false,
//这个是用于控制当源文件中存在隐式的any的时候是否报错，noImplicitAny默认为false
不知道为啥去掉就报错，不去就正常，先新增这条吧

第二种：引用变量报错

    onMounted(() => {

      const BList = store.state.brandList

      if (curBrandStorage) {      // 刷新前 把当前品牌 当前门店 存入localstorage

        curBrand.value = curBrandStorage

        curStore.value = curStoreStorage

        const list = BList.find((item) => item.value === curBrandStorage)

        // Parameter 'item' implicitly has an 'any' type.Vetur(7006)

        storeList.value = list?.storeList

      } 

    })

解决方法：定义接口(万能的)

interface ChangeList {

  value: string

  label: string

  storeList?: []

}

const list = BList.find((item: ChangeList) => item.value === curBrandStorage)

    const SetStorageKey = ({ key1, key2, value1, value2 }) => {

      // Binding element 'key1' implicitly has an 'any' type.Vetur(7031)

      window.localStorage.setItem(key1, value1)

      window.localStorage.setItem(key2, value2)

    }

    const SetStorageKey = ({ key1, key2, value1, value2 }: {key1: string, key2: string, value1: string, value2: string}) => {

      window.localStorage.setItem(key1, value1)

      window.localStorage.setItem(key2, value2)

    }

5.vue/cli 提供预处理器-自动化导入：

第一步

vue add style-resources-loader 

vue : 无法加载文件 C:\Users\CLQ\AppData\Roaming\npm\vue.ps1，因为在此
系统上禁止运行脚本。有关详细信息，请参阅 http://go.microsoft.com/fwlin
k/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue add style-resources-loader
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityExcepti
    on
    + FullyQualifiedErrorId : UnauthorizedAccess

解决：

1.管理员身份运行 powershell
2.输入 set-ExecutionPolicy RemoteSigned
   Y
3.重新执行：vue add style-resources-loader 
4.选择预处理器，enter， 生成vue.config.js:
// vue.config.js

module.exports = {

  pluginOptions: {

    "style-resources-loader": {

      preProcessor: "scss",

      patterns: ['./src/assets/styles/variable.scss'],

    },

  },

};

//另外，webpack.config.js 里也可设置，优先级比vue.config.js高

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}

6.设置npm仓库源：

局部设置：根目录下创建(.npmrm)

registry=https://registry.npm.taobao.org

sass_binary_site=http://cdn.npm.taobao.org/dist/node-sass

7.自定义双向绑定组件：

第一种写法：js

1.自定义组件-属性双向绑定-input
自定义组件 v-modal:prop = "prop"
自定义组件内部 prop接受 input :value=""
@input="$emit('update:prop', $event.target.value)"

    //特别注意： update:prop中间不能加空格，否则会失效

第二种写法： .vue 变量是双花括号   .tsx 变量是单花括号   .ts中尽量是用箭头函数

.vue
<a-input  v-model="text" placeholder="请输入" />
component： {AInput}，    注册局部组件
setup() {
        const text = ref('')  ----> 初始化赋值
        return {
                text
        }
}

.tsx
  props: ['modelValue'],
  emit: ['update:modelValue'],
  setup(props, { emit, attrs }) {
      return () {
        const oninput = (event: Event) => {
                const value = (event.target as HTMLInputElement).value
                if (value !== modelValue) {
                        emit('update:modelValue', value)
                }
        }
        return {
                                           @onInput = { oninput } 
                            value = { attrs.modelValue }
        }
      }
  }

// 注册全局组件

// globalComponents.ts
import Input from './components/Input/index'

import { App } from 'vue'

const components = [

    Input

]

const AInput = {

    install: (app: App) => {

        components.forEach( item => {

            app.component(item.name, item)

        })

    }

}

export default AInput  法一

// export default function(app: App) {   法二

//     components.forEach( item => {

//         app.component(item.name, item)

//     })

// }

--------------------------------- element plus

1.element 配合 vue3.0的版本:
        vue add element-plus
        Import on demand
        zh-CN

vue add element-plus 下好之后改main.ts， 改成这样：

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

const app = createApp(App)

import installElementPlus from './plugins/element.js'

installElementPlus(app)

app.use(store).use(router).mount("#app");

实现插件：  组件中引用
methods: {

    showMessage(this: { $Message(): void }) {

      this.$Message()

    },

  },