One, foreword

Recently, I was building a new project. My college roommate wanted to use VUE3, so I directly used VUE-CLI to build VUE3 without thinking. In the process of building, we encountered many package version problems. For example, the sass package. Node-sass and Sass-loader must be installed in the same version, otherwise there will be a lot of strange problems. Although finally also solved, but also took a long time.

After you build, think of your recent Vite, a native ESM-driven Web development build tool developed by The author of Vue yu Yu Creek. Developed based on browser native ES Imports in development environment and packaged based on Rollup in production environment. Let’s take a look at the build steps (really fast!!)

Two, installation steps

npm init @vitejs/app
Copy the code

1. Select VUE (select on demand)

2. Select JS or TS

3. The NPM run dev local project is started

Iii. Project launch

The above build project a command basically completed, the speed is really very fast ah!

Iv. Vue-router installation

npm add vue-router -D 
npm add vue-router@next -D
Copy the code
// router/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
const history = createWebHashHistory()
const router = createRouter({
    history,
    routes: [{
      path: '/'.name: 'index'.component: () = > import('.. /view/index.vue')}]})export default router;
// main.ts
import { createApp } from 'vue'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue'
const app = createApp(App)
// Automatically import public components
const modulesFiles: any = import.meta.globEager('./components/*/*.vue')
const result = Object.keys(modulesFiles).filter((item: any) = > true)
result.forEach((item: any) = > {
  const moduleName = item.split("/") [2]
  const componentConfig = modulesFiles[item]
  app.component(moduleName, componentConfig.default || componentConfig)
})
app.use(Antd).use(router).mount('#app')
Copy the code

Five, SASS installation (this step is really more convenient than VUE-CLI, pro test!)

npm add sass -D
Copy the code

Ant-design-vue (Antd configuration as shown above in Main. ts, other UI: Element-Plus based on vue3. X)

npm add ant-design-vue@next -D
Copy the code

At the end,

Once the infrastructure is installed, the basic build for project development is complete. Vite also provides the pack command (Num run build). Get started on your first Vite project

The code can be viewed at the Git repository: github.com/HarlieYang/…