It has been a long time since the new VERSION of Vue3 was released. Although I had contact with the construction before, I didn’t test too many things. In my spare time, I plan to dig pits from scratch and record my own Vue 3.0 pit climbing process

Set up the project

This project adopts Vite, a new Web development tool recently developed by UVU, which has the following advantages

  • Quick cold start
  • Instant module hot update
  • True on-demand compilation

Using Vite greatly improved the front-end development performance and development speed

Install Vite globally

  // Install vite-app globally
  npm i -g vite-app

  // Create the project
  npm init vite-app <project-name>

  cd project-name

  yarn || npm install
Copy the code

Install necessary third-party plug-ins

Install the TypeScript

  npm install -D typescript
Copy the code

The shim.vue.d.ts file is added in the root directory (SRC)

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

  / / or
  declare module '*.vue' {
    import Vue from 'vue'
    // const component: defineComponent<{},{},any>
    export default Vue
  }
Copy the code

Change main.js to main.ts

And modify the references to the index. HTML text

Install the vue – the router

Vue3.0 is recommended to install the latest vue-router. If the version is incorrect, the router cannot be used to jump to the router

  npm install vue-router@4
Copy the code

Then create the router directory in the SRC directory and the index.ts file in the directory

Import createRouter and createWebHashHistory(or createWebHistory) from vue-Router

  import {createRouter, createWebHashHistory} from 'vue-router'
Copy the code

Then create a Route object and store the route configuration. Use the createRouter method to create the router object and export it through Export Default

  const routes = [
    {
      path: '/'.component: () = > import('.. /views/home/index.vue'),
      redirect: '/index'.children: [{path: '/login'.component: () = > import('.. /views/login/index.vue')},]},]var router = createRouter({
    history: createWebHashHistory(),
    routes
  })

  export default router
Copy the code

Import it in the mian. Ts object and register it with the Vue instance using the Vue use method

  import router from './router'
  createApp(App).use(router).mount('#app')
Copy the code

Use the Vue status management tool Vuex

  / / installation
  npm install vuex@next

  / / use
  // /src/store/index.ts
  import Vuex from 'vuex'
  const store = new Vuex.Store({
    // ...
    modules: {},
    state: () = > {
      return {
        name: 'lxx'}},mutations: {},
    actions: {},
    getters: {}})export default store

  / / register
  import store from './store'
  createApp(App).use(router).use(store).mount('#app')
Copy the code

Use sASS syntax

  / / install sass
  yarn add sass

  // Move sass from Dependencies to devDependencies once the installation is complete
  // add lang=" SCSS "after style
Copy the code

If you want to configure a Vite built Vue3.0 application, you first need to create a vite.config.js file in the root directory

Configuring a Path Alias

  const path = require("path")

  function resolve(dir) {
    return path.join(__dirname, dir)
  }

  module.export = {
    alias: {
      '/ @ /': resolve('src')}}Copy the code

In this case, files in the SRC directory can be accessed through /@/

  // Access the index file in the Component directory under SRC
  import Component from '/@/component'
Copy the code

Why use @/ instead of @/, as the official Vite configuration explains here

When an alias is a file system path, use an absolute path. The relative alias value is used as is and will not be resolved to a file path. Therefore, use /@/ to represent the absolute path