Vue3入门之Typescript

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

1.项目创建

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

1
2

## 根据要求选择vue-ts模板
pnpm create 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 即可

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

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还是提示找不到模块。

(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/*"]
    }
}

5.开发环境和生产环境

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

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;

引入组件

在 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>

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;
}

8.配置局域网访问

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

1
2
3
4
5

server: {
    open: true,
    host: '0.0.0.0',
    port: 8080
},

9.引入js文件

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>

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

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>