使用Vue CLI创建typescript项目的方法

 更新时间:2019年08月09日 09:26:50   作者:秋雨  
这篇文章主要介绍了使用Vue CLI创建typescript项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本

安装命令

npm install -g @vue-cli

创建项目

vue create my-vue-typescript

上下键选择,空格键确定

接下来是一些常规选项

下面是询问要不要记录这次配置以便后面直接使用,我们选择y

当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录

{
 "useTaobaoRegistry": true,
 "presets": {
  "my-vue-typescript": {
   "useConfigFiles": true,
   "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-typescript": {
     "classComponent": true,
     "tsLint": true,
     "lintOn": [
      "save"
     ],
     "useTsWithBabel": true
    }
   },
   "router": true,
   "routerHistoryMode": true,
   "vuex": true
  }
 }
}

然后再回车就开始创建项目,但是这里却报了一个错,大概意思是源有问题。

ERROR command failed: yarn --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist

于是搜了下原因,原来是创建时候的默认源配置导致,vue cli 安装报错问题解决

所以修改下刚才生成的.vuerc下的useTaobaoRegistry属性值为false就可以了

{
 "useTaobaoRegistry": false,
  ...
}

再次安装成功

原文

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue中使用md5进行数据加密的实现方法

    Vue中使用md5进行数据加密的实现方法

    在现代Web开发中,数据安全是一个不可忽视的重要环节,Vue.js作为一个流行的前端框架,不仅提供了强大的数据绑定和组件化功能,还支持与各种后端服务的集成,本文将探讨如何在Vue应用中使用MD5算法来加密数据,从而提升应用的安全性,需要的朋友可以参考下
    2024-10-10
  • 使用el-checkbox-group选中后值为true和false遇到的坑

    使用el-checkbox-group选中后值为true和false遇到的坑

    这篇文章主要介绍了使用el-checkbox-group选中后值为true和false遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue v-viewer组件使用示例详解(v-viewer轮播图)

    vue v-viewer组件使用示例详解(v-viewer轮播图)

    这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue实现active点击切换方法

    Vue实现active点击切换方法

    下面小编就为大家分享一篇Vue实现active点击切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue使用eventBus遇到数据不更新的问题及解决

    vue使用eventBus遇到数据不更新的问题及解决

    这篇文章主要介绍了vue使用eventBus遇到数据不更新的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue3 setup中使用$refs的方法详解

    Vue3 setup中使用$refs的方法详解

    在 Vue 3 中的 Composition API 中,$refs 并不直接可用于 setup 函数,但是实际工作中确实有需求,那么该如何解决呢,本文为大家整理了两个方案,希望对大家有所帮助
    2023-08-08
  • element-plus结合sortablejs实现table行拖拽效果

    element-plus结合sortablejs实现table行拖拽效果

    使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试
    2023-10-10
  • vue前台显示500和405错误的解决(springboot为后台)

    vue前台显示500和405错误的解决(springboot为后台)

    这篇文章主要介绍了vue前台显示500和405错误的解决(springboot为后台),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 在Vue开发过程中解决和预防内存泄漏问题的方法详解

    在Vue开发过程中解决和预防内存泄漏问题的方法详解

    Vue作为一款流行的前端框架,已经在许多项目中得到广泛应用,然而,随着我们在Vue中构建更大规模的应用程序,我们可能会遇到一个严重的问题,那就是内存泄漏,因此,我们需要认识到在Vue开发过程中,内存泄漏问题的重要性,本文将给大家介绍如何解决和预防内存泄漏问题
    2023-10-10

最新评论