This is a summary of how to build a vue3 development framework, not the features and usage of VUe3.

Pay special attention to the pit

Vite benefits: Fast.

Vite faults:

1. The inability to use require makes you particularly uncomfortable when using images /img.

2. Eslint will not work

Use vue-CLI again until you can figure out how to solve the require problem

1. Install

Vue3 Chinese documentation – This step can be easily completed by looking at the documentation.

Upgrade the latest version: NPM install vue@next

Create a project named ‘test’ : NPM init vite-app test

2. The routing

Install the specified router [email protected]

NPM [email protected] – I save – dev

Create router/index.ts in the SRC directory to store the router page:

import {createRouter, createWebHashHistory} from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [{path: '/'.name: 'home'.component: () = > import('/src/pages/home.vue')}});export default router;
Copy the code

Ts will report an error

You need to create another one in the SRC directorysfc.d.tsFile:

  • Files that tell TypeScript *.vue suffixes can be handed to the vue module for processing
  • When importing *. Vue files into your code, you need to write the. Vue suffix.
  • Again, TypeScript only recognizes *. Ts files by default, not *. Vue files
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}
Copy the code

To inject the router into vue, write the following code in the main.js file:

Import {createApp} from 'vue' import App from './ app.vue 'import './index.css' // Route configuration import Router from '/src/router/index.ts'; createApp(App).use(Router).mount('#app')Copy the code

Modify app. vue as follows:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

Copy the code

The final directory structure is as follows:

At this point, the route configuration is complete, and the jump to and use of the router remains the same as before.

3. Interface request

Install axios

npm i axios –save-dev

Create service/index.ts in the SRC directory

import axios from 'axios'; // Request domain name - local request const HTTP: string = '/'; Const getUrl = (url: string) => {if (! url) { return ''; } return `${http}${url}`; }; // post request const post = ({url = ", data = {}}) => {let theUrl: string = getUrl(url); return axios.post(theUrl, data) .then((response) => { if (response) { return response; } else { return Promise.reject(); }})}; export default { Post }; export { Post };Copy the code

Use the Post method in page/home.vue:

<template> <div>home</div> </template> <script> import { Post } from '/src/service/index.ts'; Export default {created() {Post({url: 'test interface 1', data: {pagesize: 1,}})},} </script>Copy the code

When running the project, the browser reported an error:

Since you haven’t configured third-party plug-ins in Vite yet, create a vite.config.js file in the root directory of the test project:

Exports = {base: './', // export.exports = {base: '. [" axios "]}, anonymous / / path / / alias: {/ / key must begins and ends with a slash / / '/ @ / : path. The resolve (__dirname,'. / SRC / /}, / / proxy agent request: { '/api': { target: 'https://xxxx', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } }, resolve: { extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] } }Copy the code

The above contents are as follows:

  • OptimizeDeps is configured with the third-party plug-in AXIos
  • Proxy sets axios’ proxy request, with/API specified as https://xxxx

* alias Path is an anonymous path, which is convenient for importing the following files without an anonymous name

Service /index.ts:

import axios from 'axios'; // Proxy parameter const HTTP: string = '/ API /'; Const getUrl = (url: string) => {if (! url) { return ''; } return `${http}${url}`; }; // Post method const Post = ({url = ", data = {}}) => {let theUrl: string = getUrl(url); return axios.post(theUrl, data) .then((response) => { if (response) { return response; } else { return Promise.reject(); }})}; export default { Post }; export { Post };Copy the code

Run the project okK ~ directly

The final project structure is as follows: