vite build Vue3.0 project

vue3.0+TS+AntDesignVue project

fast

Vite is a new tool developed by Youda this year
. Why did Youda want to launch vite? When using webpack, every time you develop and start a project, it is relatively slow, and the hot update is also relatively slow. The main feature of vite is that it is fast. The official website describes the characteristics of vite in this way

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

Initialize the vite project

1. To initialize the project, you can open git bash; on a win computer, you can also directly open the window with cmd
and execute the following command

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

The following picture Done in 15.39s. Execution is also fast;
2. Just enter the directory with cd;
3. The execution installation depends on yarn install; start the project through yarn

dev
;

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

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

I found that the way to create Vue has changed. It used to be new Vue to initialize Vue, but in Vue3.0, it was modified to use the method of createApp;
Vue3 Chinese documentation

configuration items

configure typescript

1. Install typescript

yarn add typescript -D

2. Initialize tsconfig.json

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

3. Change main.js to main.ts
and other references to main.ts, and also need to change other pages<script> 修改为 <script lang="ts">

4. Configure ts to recognize vue files, add shim.d.ts files in the project root directory
and add the following content

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

Configure Vue Router

Vue Router 4.0, please check the complete details in Github for changes ,
current version beta: v4.0.0-beta.13, yarn installation needs to bring version number
1, install vuex

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

2. After installation, configure vue-router
to create a new router directory under the project src directory, then add the index.ts file, and add the following content

// 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. Introduce the router into main.ts and modify the main.ts file

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')

Configure Vuex

Vuex 4.0, please check Github
current version beta for changes : v4.0.0-beta.4
1. Install vuex

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

2. After installation, configure vuex
to create a new store directory under the project src directory, add the index.ts file, and add the following content

import {
    
     createStore } from 'vuex'

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

Configure Ant Design Vue

For specific usage, please refer to: Official document
1. Introducing ant-design-vue

yarn  add ant-design-vue@next

2. Introduce in 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')