2. 使用Vite搭建Vue3 + TypeScript项目 -- 初始化后续~~~~~~~~~~~~~~~~~~~~~

创建项目

使用create-vite-app

安装脚手架

# yarn
yarn global add create-vite-app

# npm
npm install -g create-vite-app

创建项目

create-vite-app <app-name>

运行项目

# yarn
yarn && yarn dev

# npm
npm install && npm run dev

PS: 进入create-vite-app的GitHub可以看到，该脚手架已经不再维护了，而是迁移到了@vitejs/create-app下，所以这种方式不再建议使用

使用@vite/create-app

创建项目

// 这里我们可以直接使用初始化指令来省略创建步骤
# npm 6.x
npm init @vitejs/app <app-name> --template <template-name>

# npm 7+
npm init @vitejs/app <app-name> -- --template <template-name>

# yarn
yarn create @vitejs/app <app-name> -- template <template-name>

PS 该方式需要Node版本 >= v12.0.0

另外，该脚手架所支持的模板并非只有Vue，直接执行yarn create @vuejs/app可以看到，有多种脚手架可供选择

当选中脚手架之后，可以根据喜好选择使用js还是ts，这里建议使用ts

然后，项目就创建完成了

启动试一下

这里我们可以看到，Vite创建的项目，默认的端口配置改成了3000，省出8080给服务端？“全栈”狂喜

相较之前的HellowWorld组件，多了IDE和插件的安利，不知道有没有收广告费

安装路由

要用就用最新的，这里选择最新版本的vue-router4

# npm
npm install vue-router@4

#yarn
yarn add vue-router@4

然后在项目下创建index.ts和routes.ts文件

index.ts

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  // 个人习惯, 这里没有使用Hash模式
  history: createWebHistory(),
  routes,
})

export default router;

routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes:RouteRecordRaw[] = [
  {
    name: 'TestComp',
    path: '/test-comp',
    component: () => import('@/pages/test/index.vue'),
  },
]

export default routes;

BTW，为了方便开发，最好配置一下路径别名，这是我目前vite.config.ts的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 定义路径别名
    alias: {
      '@': resolve(__dirname, 'src'),
      "pages": resolve('src/pages/'),
      "components": resolve('src/components/'),
      "utils": resolve('src/utils/'),
      "routes": resolve('src/routes/'),
      "styles": resolve('src/styles/'),
    },
  },
})

踩坑，此处需要安装一个依赖包，安装到dev里就好了

#npm
npm install @types/node -D

#yarn
yarn add @types/node -D

接下来，访问下/test-comp试一下

完活！

安装Axios

有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。 -- copy自 Vuejs文档

安装

#npm
npm install axios

#yarn
yarn add axios

测试一下先简单测试下Axios有没有成功引用，在刚刚的TestComp中调用一下，

import axios from 'axios'

axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(
  response => {console.log(response)}
)

再次访问/test-comp，查看控制台

可以看到请求成功发起，并拿到了返回值，详细的封装以及拦截器的设置放到之后再处理

安装组件库

鉴于目前的文档支持以及生态支持，这里选用AntDesign，antd的官方文档对Vue3+ts的支持还是很棒的

安装组件库

#npm
npm install --save ant-design-vue@next

#yarn
yarn add ant-design-vue@next

测试一下是否安装成功

首先在main.ts中全局引入样式

import 'ant-design-vue/dist/antd.css';

在TestComp中引入组件测试一下，组件完整代码：

<template>
  <div class="test-temp">
    <h1>{{msg}}</h1>
    <Button type="primary" @click="handleClick">测试组件</Button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';``

import { Button, message } from 'ant-design-vue';

interface IState {
  msg: String,
};

export default defineComponent({
  name: 'TestTemp',
  components: {
    Button,
  },
  setup() {
    const state = reactive<IState>({
      msg: '路由测试'
    });

    const handleClick = () => {
      message.success('测试一下组件库');
    }

    return {
      handleClick,
      ...toRefs(state),
    };
  },
});
</script>

打开页面，点击按钮

当然，在开发中也是可以全局引入组件的

// main.ts

import Antd from 'ant-design-vue';

const app = createApp(App);

app.use(Antd).mount('#app');