vue3+vite+ts 搭建项目

Posted 2023-04-10

参考技术A 我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，这样我们就能引入ts，后面不用额外单独对他引入

vite 的配置项很多，具体的小伙伴可以到vite官网去看一下 https://vitejs.dev/config/ ，这次我们就配置一下别名。这个别名@的配置有一个小小的坑，也不算是坑，就是要引入path的时候会报错，这可能是我自己对这个不熟，又没有认真看这个提示，就花了点时间才解决这个问题。下面就是解决方案及具体可以看我另外一篇文章。

使用import方式引入的报错提示

使用require方式引入path的报错提示

(1)安装node依赖

(2)配置node模块
在ts.config.js中添加配置"types": ["node"]

（3）配置别名

在src目录下创建plugins文件夹，再新建一个element3.ts,用于存放ui库引入的配置

搭建vue3 + ts + vite项目的最佳方案是啥

【中文标题】搭建vue3 + ts + vite项目的最佳方案是啥

【英文标题】：What is the best solution to build a vue3 + ts + vite project搭建vue3 + ts + vite项目的最佳方案是什么

【发布时间】：2022-01-11 13:17:44

【问题描述】：

我是vue新手，对如何正确组合vite，ts和vue3感到困惑。我想知道vue中最好的解决方案是什么，我稍后会添加vue route，vuex。

我找到了两种创建上述项目的方法：

npm init vite（那我选择vue-ts） npm init vite-app <project-name>（然后我使用 npm 手动添加 typescript）

我的问题是：

第一种方式生成vite.config.ts，而第二种方式没有，为什么，最好的解决方案是什么？

对于ts在vue中的代码风格，写什么风格比较好。我见过很多种在vue3中写一个组件的代码 用打字稿，例如：

(1)

<script>
  import  defineComponent, computed  from 'vue'
  import  useStore  from 'vuex'
  import  key  from '../store'

  export default defineComponent(
    name: 'HelloWorld',
    props: 
      msg: 
        type: String,
        default: ''
      
    ,
    setup() 
      const store = useStore(key)
      const count = computed(() => store.state.count)

      return 
        count,
        inCrement: () => store.commit('increment')
      
    
  )
</script>

(2)

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator'
import  isExternal  from '@/utils/validate'

@Component(
  name: 'SidebarItemLink'
)
export default class extends Vue 
  @Prop( required: true ) private to!: string

  private isExternal = isExternal

</script>

【问题讨论】：

可能不相关，但 NuxtJS 是一个构建在 Vue 之上的框架。它内置了对 Typescript 和 Vite 的支持。自己去看看，也许你能从中得到一些很好的启发； nuxtjs.org

谢谢，我去看看这个文档。

【参考方案1】：

对于组件代码风格，vue 3推荐使用defineComponent + composition api + template(or tsx)

<template>
  <p class="msg"> msg </p>
</template>

<script lang="ts">
import  defineComponent  from 'vue'

export default defineComponent(
  setup () 
    const msg = 'Hello World!';

    return 
      msg
    
  
)
</script>

<style scoped lang="scss" >

</style>