vue+typescript如何使用crypto-js

Posted 2023-05-09

参考技术A 先说重点，如果要支持ie11，crypto的版本就一定要用我写的
"@types/crypto-js": "^4.0.2",
"crypto-js": "^4.0.0",

① 安装
npm install crypto-js@4.0.0 ----这个一定要用这个版本，或者更低一点，再低的我没有试，反正这个是支持ie的-如果不考虑ie就忽略
npm install --save @types/crypto-js

②创建

好了 就这样引入啦~

③使用

简简单单~ 就这样吧~

如何使用 VS Code 在 .vue 文件中使用 Typescript？

【中文标题】如何使用 VS Code 在 .vue 文件中使用 Typescript？

【英文标题】：How to work with Typescript in .vue files using VS Code?

【发布时间】：2017-06-22 20:29:30

【问题描述】：

我正在使用 Visual Studio Code、Vue 2（webpack 模板）和 Typescript。

这是我的 App.vue 组件：

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default 
        components: 
            Navbar
        
    
</script>

问题 1：一切正常，但我希望在 <script lang="ts"> 标记内有智能感知，就像它在 .ts 文件中发生的那样，那么我该如何实现呢？

问题 2：在我的 main.ts 中，我有 import App from './App'，但由于 VS Code 找不到 .ts 文件，因此“./App”带有红色下划线。有没有办法让编辑器在编译前（在编辑时）识别 .vue？

更新（2018-03-25）：我强烈建议所有想要设置打字稿的人阅读this

【问题讨论】：

至于第二季度，我正在使用带扩展名的导入：“import default as Question from './Question.vue'”

@TSV 但是这样做，“问题”不会是“任何”类型？

是的，我仍然没有智能感知，但让它遵守了 :-)

这里有同样的问题。 Intellisense 不适用于带有 typescript 的 .vue 文件。这个问题是从 2 月份开始的，我很惊讶这个问题仍然没有解决，至少在 VS Code 中没有解决。

【参考方案1】：

对于 Q1，将 Typescript 代码放入单独的 script.ts 文件中，并将其包含在 App.vue 中，例如：

<script lang="ts">
   import s from './script'
   export default s
</script>

对于第二季度，正如@Oswaldo 所建议的，您可以定义一个具有以下内容的vue.d.ts 文件：

declare module '*.vue' 
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value

如果你把这个文件放在$Project_ROOT/typings文件夹里，你需要把这个类型的文件包含在你的tsconfig.jsonlike中

"typeRoots": ["./typings"]

然后您可以导入带有.vue 后缀的*.vue 文件：

import App from './App.vue'

如果你不喜欢包含 .vue 后缀，你可以将所有 Vue 组件放在一个文件夹中，例如 src/components 并将 vue.d.ts 更改为如下：

declare module 'src/components/*' 
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
 

src 被定义为webpack.base.conf.js 作为绝对路径的别名。

resolve: 
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: 
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  

那么你需要使用完整路径来导入一个没有.vue后缀的组件：

import App from 'src/components/App'

两者都不是优雅的解决方案，但红色下划线消失了。

【讨论】：

thx，只需将 Q1 更改为建议 vetur（因为我的问题是关于 vue 单文件组件），我会接受它作为答案

我发现包含.d.ts 文件是在.vue 文件中禁用智能感知的原因！显然，当 VS Code 将 *.vue 扩展识别为模块时，Vetur 将不再解释 .vue 文件。

【参考方案2】：

Q2，vue-class-component 自带解决方案，sfc.d.ts，希望对你有帮助。如果您对 Q1 有任何想法，请告诉我

【参考方案3】：

对于第一季度，我发现了一个不错的 VS Code 扩展，名为 vetur，支持智能感知

Q2用.vue文件无法实现，只需要使用.ts里面有模板

【讨论】：

应该注意vetur（或任何其他VS Code .vue插件）不支持类型检查错误。

Vetur intellisense 将在 0.6 版本中添加：github.com/octref/vetur/pull/94