阅读 1232

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可以看到,有多种脚手架可供选择

image.png

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

image.png

  • 然后,项目就创建完成了

image.png

  • 启动试一下

image.png

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

image.png

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

安装路由

  • 要用就用最新的,这里选择最新版本的vue-router4
# npm
npm install vue-router@4

#yarn
yarn add vue-router@4
复制代码
  • 然后在项目下创建index.tsroutes.ts文件

image.png

  • 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试一下

image.png

完活!

安装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,查看控制台

image.png

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

安装组件库

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

  • 安装组件库
#npm
npm install --save ant-design-vue@next

#yarn
yarn add ant-design-vue@next
复制代码
  • 测试一下是否安装成功
  1. 首先在main.ts中全局引入样式
import 'ant-design-vue/dist/antd.css';
复制代码
  1. 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>
复制代码
  • 打开页面, 点击按钮

image.png

  • 当然,在开发中也是可以全局引入组件的
// main.ts

import Antd from 'ant-design-vue';

const app = createApp(App);

app.use(Antd).mount('#app');
复制代码
文章分类
前端
文章标签