projet vue3.0+TS+AntDesignVue

vite

Vite est un nouvel outil développé par Youda cette année
. Pourquoi Youda a-t-il voulu lancer vite ? Lorsque vous utilisez webpack, chaque fois que vous développez et démarrez un projet, il est relativement lent, et la mise à jour à chaud est également relativement lente. La principale caractéristique de vite est qu'il est rapide. Le site officiel décrit les caractéristiques de vite de cette manière

1、快速的冷启动
2、即时的模块热更新
3、真正的按需编译

Initialiser le projet vite

1. Pour initialiser le projet, vous pouvez ouvrir git bash ; sur un ordinateur win, vous pouvez également ouvrir directement la fenêtre avec cmd
et exécuter la commande suivante

yarn create vite-app <project name>
//我用的yarn，如没安装需要安装yarn

La figure suivante Done in 15.39s. L'exécution est également rapide ; insérez la description de l'image ici
2. Entrez simplement dans le répertoire avec cd ;
3. L'installation de l'exécution dépend de l'installation de yarn ; démarrez le projet via yarn dev ; la figure suivante est démarrée dans vscode. Dans la figure ci-dessus, vous pouvez voir que la structure de projet nouvellement créée est fondamentalement la même que la structure de projet créée par vue-cli4. Ils sont à la fois App.vue et main.js pour afficher le contenu du
insérez la description de l'image ici
fichier
main.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'

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

J'ai trouvé que la façon de créer Vue a changé. C'était le nouveau Vue pour initialiser Vue, mais dans Vue3.0, il a été modifié pour utiliser la méthode de createApp;
Documentation chinoise de Vue3

éléments de configuration

configurer le texte dactylographié

1. Installez le texte dactylographié

yarn add typescript -D

2. Initialisez tsconfig.json

//执行命令 初始化 tsconfig.json 
npx tsc --init

3. Remplacez main.js par main.ts
et d'autres références à main.ts, et devez également modifier d'autres pages<script> 修改为 <script lang="ts">

4. Configurez ts pour reconnaître les fichiers vue, ajoutez les fichiers shim.d.ts dans le répertoire racine du projet
et ajoutez le contenu suivant

declare module "*.vue" {
    
    
  import {
    
     Component } from "vue";
  const component: Component;
  export default component;
}

Configurer Vue Router

Vue Router 4.0, veuillez vérifier les détails complets dans Github
pour les changements, la version bêta actuelle : v4.0.0-beta.13, l'installation de fil doit apporter la version numéro
1, installez vuex

yarn add [email protected]
// or
yarn add vue-router@next

2. Après l'installation, configurez vue-router
pour créer un nouveau répertoire de routeur sous le répertoire src du projet, puis ajoutez le fichier index.ts et ajoutez le contenu suivant

// import VueRouter from 'vue-router'
import {
    
    createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    
    
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
    
    
//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
//   history: VueRouter.createWebHashHistory(),
//   routes, // short for `routes: routes`
// })

3. Introduisez le routeur dans main.ts et modifiez le fichier main.ts

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')

Configurer Vuex

Vuex 4.0, veuillez vérifier la version bêta actuelle de Github pour les changements : v4.0.0-beta.4 1. Installez vuex

       yarn add [email protected]
       //或者
       yarn add vuex@next

2. Après l'installation, configurez vuex
pour créer un nouveau répertoire de magasin sous le répertoire src du projet, ajoutez le fichier index.ts et ajoutez le contenu suivant

import {
    
     createStore } from 'vuex'

interface State {
    
    
  userName: string
}
export default createStore({
    
    
  state(): State {
    
    
    return {
    
    
      userName: "vuex",
    };
  },
});

Configurer Ant Design Vue

Pour une utilisation spécifique, veuillez vous référer à : Document officiel
1. Présentation de ant-design-vue

yarn  add ant-design-vue@next

2. Introduire dans main.ts

iimport {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router
// 整个应用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')

vite construire le projet Vue3.0