preface

With the development of VUE today, it has become one of the three mainstream frameworks, and it is even more popular in China, and has become a necessary skill for job hunting. Vue3 has been released for some time, and what interests me most is the new tool Vite, so I can’t wait to create a project and try it.

The definition of Vite

A lighter, faster Web application development tool for modern browsers, based on the ECMAScript standard native module system (ES Modules) implementation.

The characteristics of Vite

  • Lightning fast cold server startup

  • Instant Hot Module Replacement (HMR)

  • True on-demand compilation

In fact, the most intuitive feeling of this framework is that it is light and agile. The cold startup speed can be said to be seconds. The development experience is extremely comfortable.

Why does Vite start fast?

Vite takes advantage of modern browsers’ native support for ESM features, omitting the packaging of modules, only to request a specific file will be compiled on demand, vite will import the replacement path according to import @modules, then node_modules to find relevant dependencies, Template, script and style are processed separately. Webpack compiles all modules ahead of time, so as the project gets bigger, it starts more slowly. Enter the diagram below:

Create a project

npm init vite-app demo
Copy the code

Enter this command in the command window to create a Vite project, but also very thoughtful instructions for subsequent operations, so I won’t say more here, just follow the command window prompts to install dependencies.

The directory structure is the same as before, with the business written in SRC

Then run NPM run dev to start the project

After the project launches, you will see a page like this, which, unlike hello Vue, simply implements a counter function

This is a small function implemented in vue2 mode. In fact, it can be implemented using vue3’s Composition API entry setup. Note that there is no instance object this in setup, and declared variables must be returned at the bottom of the function. And its execution is between beforeCreate and created in the old health function.

Vite and TypeScript

With the increasing complexity of front-end applications, the problem is that maintainability and extensibility get worse. Using TS to write code greatly reduces bug debugging time. After installing TS dependencies, in Vue3 you just need to add a lang=’ts’ to the script tag to introduce TS pleasant coding.

Vite currently only works with vue3 versions (regardless of the rest of the framework), and VUe3 is written in TS, so it’s very friendly for TS developers. If you haven’t used TS before, it doesn’t matter, vue3 is just more user-friendly for TS users. Instead of just using TS (which is still recommended).

Vite packaging

Because Vite is highly dependent on ES Modules, it only supports modern browsers. If you need to be compatible with IE, you need to do something else. For details, please refer to here.

You just need to execute the NPM run build package on the terminal and the process is easy and pleasant. Don’t get too excited yet. If you open the package file in the Dist file and find that the page doesn’t show up, you’ll remember to configure the publicPath in vue.config.js: ‘./’, but when you do all this, it doesn’t solve the problem, why? Don’t panic here, just keep looking down.

Solutions:

This is because the default vue package path is the root path, and the configuration file in Vite is vite.config.js, so similarly, you can simply write base: ‘./’ in the configuration.

Configure routing and status management

The routing configuration

// router/index
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = 
[  
 {    
    path: '/',
    name: 'Home',
    component: import('/@views/Home')
 }, 
 {    
    path: '/user',
    name: 'User',
    component: () => import('/@views/User')
 }
]
const router = createRouter({  
    history: createWebHistory(process.env.BASE_URL), 
    routes
})
export default router
Copy the code

Vuex configuration

// store/index
import { createStore } from 'vuex'
export default createStore({
    state: {},  
    mutations: {},
    actions: {},
    modules: {}
})
Copy the code

Vuex can be replaced by lighter dependency injection tools provide and Inject functions. You can choose between the two according to your personal habits.

Import {provide, inject} from 'vue' const Ancestor = {setup() {provide("name", "I am the value passed by the parent component to the child component "); } } const Descendent = { setup() { const name = inject("name") return { name } } }Copy the code

conclusion

After introducing you should have a preliminary understanding of vite, it is worth saying that vite development experience is really comfortable, huh? Did I say that 😅, of course, compared to the strong webPack ecosystem, Vite is still a little weak, so it is not realistic to use it in real projects in a short time.

Well, that’s the end of the vite experiment, and there will be updates on vue3 in conjunction with other frameworks and dependencies. See you next.