Vue3入门之Typescript

标签： 无 分类： 未分类 创建时间：2022-02-21 01:16:54 更新时间：2025-09-26 04:44:39

使用vite可以创建vue-ts模板

1.项目创建

使用pnpm可以方便的创建vue-ts的模板，选择vue，选择vue-ts即可。

1
2
## 根据要求选择vue-ts模板
pnpm create vite

参考文章:
1.2021年了，vite能投入生产了吗？vite.config.js配置踩坑
2.备战2021：vite工程化实践，建议收藏

2.修改typescript版本

在使用 vite 创建vue-ts的模板之后，什么代码都没有改

1
2
3
4
## 安装
pnpm install
## 运行
pnpm dev

安装运行之后，还是可以允许的，就是报错，打开vscode,出现了vscode报错的情况,一片一片的红，比如：Cannot find name ‘defineProps’

[解决]
最新版本可能没有这个问题了，遇到就按下面这么做好了，而且输入type，也没有了Volar这个选项了，不知道为什么，要是遇到了再说好了。
(1) 在VS code 中，按F1键，输入框中输入 “typescript: select Typescript version”

(2) 选择 workspace 下的 typescript 即可

为什么会出现这样的情况，暂时不清楚，反正就是这么解决了，要是报错，我就浑身难受，虽然不影响开发，但是就是想解决。

参考文章:
1.vue3.0.0 初体验
2.Vite 官方中文文档
3.使用vite来新建vue3项目，配置vuex、vue-router
4.vue vite项目报ts错误
5.vue3.0+vite (二) vite.config.js基本配置
6.配置 Vite

3.配置src别名

以前的vue的时候，经常用 @ 符号代替 src 目录，这样可以少些一些代码，也不用写相对路径了，这样更加的方便。主要有两步
(1) 增加 “allowSyntheticDefaultImports”:true
引入path路径的时候，需要在tsconfig.node.json中compilerOptions节点下添加：”allowSyntheticDefaultImports”:true。

有些参考文章是在tsconfig.json中的compilerOptions，我在这个文件中修改没有用。修改alias的别名(可以把tsconfig.node.json删除，把tsconfig.json中的 “references”: [{ “path”: “./tsconfig.node.json” }] 删除 )。

(2) 安装依赖

1
2
3
4
## 安装依赖
pnpm add @types/node -D 
## or
npm install @types/node --save-dev

(3) 配置 vite.config.js 文件
编写 vite.config.js 文件，增加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      }
  },
})

这样做之后，虽然可以编译通过，但是vscode还是提示找不到模块。

参考文章:
1.vue3.0+vite+ts项目搭建–vite.config.ts配置(三)
2.找不到模块“path”或其相应的类型声明 npm install @types/node –save-dev
3.此模块是使用 “export =“ 声明的，只能在使用 “allowSyntheticDefaultImports“ 标志时进行默认导入。 tsconfig.json中compilerOptions对象下添加设置allowSyntheticDefaultImports为true就可以了
4.vs code 中路径别名（@）提示和转定义等问题。
5.vscode vue+ts 提示找不到模块但是程序正常运行 我在这里写了答案
6.tsconfig.json 是什么
7.模块 “path“只能在使用 “allowSyntheticDefaultImports“ 标志时进行默认导入，使用 “export =“ 声明的，只能使用 “allowSyntheticDefau“

(4) 修改 tsconfig.node.json 文件
我写了一个api模块，是一个js文件，但是在引入的时候，总是会报错找不到模块：Cannot find module ‘@/api/gas.js’ or its corresponding type declarations.。

【解决】
在tsconfig.json中添加如下的内容，增加@别名。注意，就是不能写成 “@”，需要带着后面的 “@/*”

1
2
3
4
5
6
7
8
"compilerOptions": {
    // ++ 这里加上baseUrl 和 path即可 ++
    "baseUrl": "./",
    "paths": {
	  // 根据别名配置相关路径
      "@/*": ["./src/*"]
    }
}

参考文章:
1.ts文件中引入js模块 使用require引入js模块
2.为TypeScript引用的JS写声明文件 这里的内容还是挺多的，
3.ts中引入js文件以及使用全局js方法报错问题 无法找到模块“@/xxx/xxx”的声明文件。“xxx.js”隐式拥有 “any” 类型。const { encryptionJump,decryptJump } = require(“@/utils/rsa”)
4.深入理解 TypeScript
5.Show error “Cannot find module” although I have typings folder 这个讨论没看明白
6.vite+ts vscode无法识别别名路径 这个可以借鉴一下

5.开发环境和生产环境

vite在 import.meta.env 对象上暴露环境变量，替代了 process.env。.env.production用于生产环境，.env.development 用于生产环境。在.env文件中的以 VITE_开头的变量，可以在 import.meta.env 上使用。

参考文章:
1.Vue3+Vite+TypeScript多环境项目搭建 在根目录下创建 .env.dev文件和 .env.prod文件,分别代表开发、测试环境,文件内容如下,注意这里边的变量需要已VITE_开头。在package.json修改scripts里的dev命令为vite –force –mode dev，新建prod命令”prod”: “vite –mode prod”
2.环境变量和模式
3.vite+vue3+ts+vant搭建项目 1.babel.config.js文件需要对vant框架需做额外插件处理;2.ts配置时需要去除掉node_modules, 避免对依赖项进行校验，额外增加项目编译时间;3.项目引用路径的简写除了在webpack文件中需要配置，tsconfig.json也需要额外配置;4.在vite.config.js的plugins中处理vant框架的引入，在配置文件中还有对less的处理；5.vite-ssr服务配置

6.编写ts模块

router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import { defineAsyncComponent } from 'vue';

const routes: Array<RouteRecordRaw> = [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('@/pages/home/index.vue')
    }
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router

vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      token: null
    }
  },
  mutations: {
    increment (state:any) {
      state.count++
    }
  }
});

export default store;

参考文章:
1.浅谈TypeScript的模块导入导出
2.vue3 + ts 初体验 包含了路由配置、组建创建，还有组件编写。在 vue-router4.0 中，提供了两种创建 history 的方式，分别是 createWebHistory 和 createWebHashHistory。由于采用了 typescript 编码，在定义 routes 常量时，需要声明类型为 Array。
3.VSCode 中，TS 提示 ”无法找到 *.vue 声明文件“ 的解决方案

引入组件

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。而且需要将Vetur插件，换成Volar插件，这样就不会报找不到组件的问题了。

1
2
3
4
5
6
7
<template>
    <HelloWorld />
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"; // 此处使用 Vetur 插件会报红
</script>

参考文章:
1.Vue3 script setup 语法糖详解 组件自动注册，组件核心 API 的使用，父子组件通信，定义响应变量、函数、监听、计算属性computed 等等内容。
2.vscode使用vue3 setup语法引入组件时波浪线问题 用Volar,再把之前的Vetur 禁用掉，波浪线解除

7.配置二级目录

路由模式使用了 history 模式，使用 nginx 进行转发，配置为二级目录，页面现实空白。比如我这里的二级目录为 test,主要解决方法包括下面几个步骤

(1) 配置vite.config.js中的 base 配置为 ”/test“，可以用 mode===’production’?’/test’:’’ 配置

1
2
3
4
5
6
7
8
9
export default defineConfig(({ mode, command }) => {
    return {
        // 部署生产环境和开发环境下的URL。
        // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
        // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
        base: mode === 'production' ? '/test' : '/',
    }
})

(2) 修改route中的history: createWebHistory(“/test”)，可以用变量：import.meta.env.VITE_BASE_URL 替代，这里需要在.env.producation文件中定义 VITE_BASE_URL

1
2
3
4
5
6
let baseUrl=process.env.NODE_ENV == 'development' ?"/":"/test";
const router = new createRouter({
	history:createWebHistory(baseUrl),
	routes:[
	]
})

(3) 配置nginx,指向二级目录

1
2
3
4
5
6
7
## 用汽申报
location ^~ /test {
        alias /cloud/test/dist;
        try_files $uri $uri/ /test/index.html;
        index index.html;
}

参考文章:
1.Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
2.VUE3 造轮子之 打包构建配置二级目录
3.Vue 3使用二级目录部署(Nginx) Vue项目中route关键配置如下：

8.配置局域网访问

在vite.config.js文件中添加server配置。

1
2
3
4
5
server: {
    open: true,
    host: '0.0.0.0',
    port: 8080
},

参考文章:
1.vite启动的服务默认不能通过ip地址访问

9.引入js文件

参考文章:
1.深入理解shims-vue.d.ts和declare module

10.在html中使用环境变量

我这里有一个使用高德地图密钥的配置，这里我想着在这个script的标签里面，使用环境变量，如果直接输出，就会出现 ：Uncaught SyntaxError: import.meta may only appear in a module 错误。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
  <div id="app"></div>
  <script>
      console.log(import.meta.env.VITE_END_POINT);
  </script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      serviceHost:'/_AMapService'
    }
  </script>
  <script type="module" src="/src/main.ts"></script>
</body>

经过一番的折腾，我放弃了,直接写到了 模块的代码里面。

参考文章:
1.如何在 Vite 2.0 项目中导入环境变量
2.vite 使用 env 环境变量 这里安装了一个 vite-plugin-html 插件，但是我这里没有显示：模块“”vite-plugin-html””没有导出的成员“injectHtml”

11.script setup lang=”ts”

直接引入其他的组件，然后在模板中使用就可以了。

1
2
3
4
5
6
7
8
9
10
11
<template>
    <Foo></Foo>
    <foo-item></foo-item>
    <component :is="Foo" />
    <component :is="someCondition ? Foo : FooItem" />
</template>
<script setup lang="ts">
import Foo from "./Foo.vue"
import FooItem from "./FooItem.vue"
const someCondition = false
</script>

引入的组件会自动注册的。需要注意的是，使用动态组件的时候，应该使用动态的 :is 来绑定

1
2
3
4
5
6
7
8
9
<template>
    <component :is="Foo" />
    <component :is="someCondition ? Foo : FooItem" />
</template>
<script setup lang="ts">
import Foo from "./Foo.vue"
import FooItem from "./FooItem.vue"
const someCondition = false
</script>

参考文章:
1.Vue3中

温馨提示
访客数人次
友情链接
**注意：以上网站都没给钱**
精彩推荐
开源项目