前言

vue3.x正式版已经发布有几个月了！终于有时间学习vue3.x了！本文记录了使用vue3.x+TS从0到1项目开发全过程。

项目搭建

  • 创建项目
1
yarn create vite-app
  • 运行项目
1
2
cd ts_vue // 进入项目目录
yarn dev //启动项目
  • 加入TS
1
yarn add typescript
  • 初始化项目引入TS以及基础配置

根目录创建vite.config.ts文件，相当于vue2.x里面的vue.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import path from "path";

const pathResolve = (pathStr: string) => {
  return path.resolve(__dirname, pathStr);
};

const config = {
  base: "./", //在生产中服务时的基本公共路径。@default '/'
  alias: {
    "/@/": pathResolve("./src"),
  },
  outDir: "dist", //构建输出将放在其中。如果目录存在，它将在构建之前被删除。@default 'dist'
  minify: "esbuild", //压缩
  hostname: "localhost", //ip地址
  port: 8888, //端口号
  open: false, //是否自动在浏览器打开
  https: false, //是否开启 https
  ssr: false, //是否服务端渲染
  optimizeDeps: {
    // 引入第三方的配置
    // include: ["moment", "echarts", "axios", "mockjs"]
    include: ["axios"],
  },
  proxy: {
    //配置代理
    "/api": {
      target: "http://10.0.11.7:8090",
      changeOrigin: true,
      ws: true,
      rewrite: (path: string) => path.replace(/^\/api/, ""),
    },
  },
};

module.exports = config;

创建TS的配置文件 tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "compilerOptions": {
      "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
      "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
      "strict": true /* Enable all strict type-checking options. */,
      "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
      "paths": {
          "@/*": ["*", "src/*"]
      }/* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
      "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
      "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
      "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
      "skipLibCheck": true /* Skip type checking of declaration files. */,
      "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
    }
  }

修改main.js为main.ts

修改后你也许辉发现，有问题，啥问题呢？引入的.vue文件报错了！

这是因为ts不识别**.vue**文件。

解决办法

创建xxx.d.ts,本人创建的是shims-vue.d.ts

1
2
3
4
5
declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const componentOptions: ComponentOptions;
  export default componentOptions;
}

添加less less-loader

  • 安装
1
yarn add less less-loader -D
  • 将css文件修改成less文件，引入的地方也改成xxx.less。然后运行页面，你会发现，ok了！页面正常显示了！偷个懒，这里就不上截图了！

引入Vant组件库

  • 下载
1
yarn add vant@next -S
  • 使用

全局引入 main.ts中

1
2
3
4
5
6
7
import { createApp } from 'vue'
import App from '/@/views/index.vue'
import '/@/styles/public.less'
import Vant from 'vant';
import 'vant/lib/index.css';

createApp(App).use(Vant).mount('#app')

页面中使用

1
2
3
4
5
6
7
8
9
<template>
  <van-button type="primary">主要按钮</van-button>
</template>

<script>
export default {
  name: "App",
};
</script>

按需导入组件?

按需导入？不存在的，哈哈！

看官网给的解释

在 Vite 中无须考虑按需引入的问题。Vite 在构建代码时，会自动通过 Tree Shaking 移除未使用的 ESM 模块。而 Vant 3.0 内部所有模块都是基于 ESM 编写的，天然具备按需引入的能力。

现阶段遗留的问题是，未使用的组件样式无法被 Tree Shaking 识别并移除，后续我们会考虑通过 Vite 插件的方式进行支持。