Create a project

Using the create – vite – app

  • Erection of scaffolding
# yarn
yarn global add create-vite-app

# npm
npm install -g create-vite-app
Copy the code
  • Create a project
create-vite-app <app-name>
Copy the code
  • Run the project
# yarn
yarn && yarn dev

# npm
npm install && npm run dev
Copy the code

PS: If you go to Create-viet-app’s GitHub, you can see that the scaffolding is no longer maintained, but migrated to @vitejs/create-app, so this method is no longer recommended

Using the @ vite/create – app

  • Create a project
// We can skip the creation step by directly using the initialization directive# 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>
Copy the code
  • PS This mode requires Node version >= V12.0.0

In addition, Vue is not the only template supported by yarn create @vuejs/app. There are many scaffolds to choose from

  • Once you have selected the scaffolding, you can choose to use JS or TS as you like, and TS is recommended

  • The project is then created

  • Try it on

  • The default port configuration for the Vite project was changed to 3000, saving 8080 for the server. “Full stack” exultation

  • Compared with the previous HellowWorld component, there are more IDE and plug-in Amway, I wonder if there is any advertising fee

Install the routing

  • To use the latest, select the latest version of Vue-Router4
# npm
npm install vue-router@4

#yarn
yarn add vue-router@4
Copy the code
  • Then create it under the projectindex.tsandroutes.tsfile

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

const router = createRouter({
  // Personal habit, no Hash mode is used here
  history: createWebHistory(),
  routes,
})

export default router;
Copy the code
  • routes.ts
import { RouteRecordRaw } from 'vue-router';

const routes:RouteRecordRaw[] = [
  {
    name: 'TestComp'.path: '/test-comp'.component: () = > import('@/pages/test/index.vue'),},]export default routes;
Copy the code
  • BTW, in order to facilitate development, it is best to configure the path alias, which is my currentvite.config.tsThe configuration of the
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // Define the path alias
    alias: {
      The '@': resolve(__dirname, 'src'),
      "pages": resolve('src/pages/'),
      "components": resolve('src/components/'),
      "utils": resolve('src/utils/'),
      "routes": resolve('src/routes/'),
      "styles": resolve('src/styles/'),}}})Copy the code
  • Install a dependency package in dev
#npm
npm install @types/node -D

#yarn
yarn add @types/node -D
Copy the code

Next, visit /test-comp and try it out

The live!

Install Axios

There are a lot of times when you’re building an application and you need to access an API and present its data. There are several ways to do this, and using axios, an HTTP client based on promises, is one of the most popular. — Copy from the Vuejs document

  • The installation
#npm
npm install axios

#yarn
yarn add axios
Copy the code
  • Test the

Let’s do a quick test to see if Axios has successfully referenced it, call it from TestComp,

import axios from 'axios'

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

Visit /test-comp again to view the console

You can see that the request was successfully initiated with the return value, and that the detailed encapsulation and interceptor Settings are processed later

Installing component libraries

In view of the current documentation support and ecological support, AntDesign is used here. The official documentation of ANTD is great for Vue3+ TS support

  • Installing component libraries
#npm
npm install --save ant-design-vue@next

#yarn
yarn add ant-design-vue@next
Copy the code
  • Test whether the installation is successful
  1. First of all inmain.tsGlobal import styles in
import 'ant-design-vue/dist/antd.css';
Copy the code
  1. inTestCompTo introduce a component test, component complete code:
<template>
  <div class="test-temp">
    <h1>{{msg}}</h1>
    <Button type="primary" @click="handleClick">The test component</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: 'Route Test'
    });

    const handleClick = () = > {
      message.success('Test the component library');
    }

    return{ handleClick, ... toRefs(state), }; }});</script>
Copy the code
  • Open the page and click the button

  • Of course, components can also be introduced globally during development
// main.ts

import Antd from 'ant-design-vue';

const app = createApp(App);

app.use(Antd).mount('#app');
Copy the code