Vite out of the box

• In the official documentation of vite, you can create a project by running the NPM or yarn command init or create@vitejs /app. However, in a live broadcast in Rainy Creek, it was mentioned that vite starts from 0 and implements functions similar to Live Server or HTTP-Server by using Vite
  • After downloading vite using YARN, you can see packge and nodemodule for the directory
    • Download command:yarn add vite
  • Next we create an index.html
    • Add an H1 tag to say Hello
    • 
  • Open the package.json file
    • Something like this
      • 
    • We added a shorthand save for the vite command
      • 
  • Let’s get our demo running
    • The commandyarn dev
    • The local server address is displayed when the browser is opened

• This is the simple use of Vite, and I will start with the use of link and import

Import is used in HTML files

• Current mainstream browsers add support for the ES specification

• First we add a script tag to the HTML file and introduce main.js

  • <h1>say Hello</h1>
    <script type="module">
        import '/main';
    </script>
    Copy the code

  • Create main.js in the root directory

    console.log('main.js Hello')
    Copy the code

  • Go back to the browser and you’ll find main.js introduced and executed

• So far, I have learned how to use import in HTML. Now I will talk about how to use CSS files in Vite.

The difference between importing CSS files using import in vite and importing module.css

• First we create a style.css file under the directory to write

  • h1{
        color : red;
    }
    Copy the code

• Go back to the HTML and add import. Go back to the browser and you’ll see that the CSS file is in effect

  • <h1>say Hello</h1>
    <script type="module">
        import '/main';
        import '/style.css'
    </script>
    Copy the code

• The previous step is simple and easy to understand. The next step is to introduce module.css

  • Next we comment out the introduced CSS file and create a new style.module. CSS file in the root directory and write

  • .text{
        color : blue;
    }
    Copy the code

  • Go back to the HTML and add import CSS from ‘/style.module. CSS ‘and console the CSS variable

  <h1>say Hello</h1>
  <script type="module">
      import '/main';
      // import '/style.css'
      import css from '/style.module.css'
      console.log(css);
  </script>
  Copy the code

  • We’ll see that the CSS variable prints an object key that sets the CSS class name for you: the class name that Vite assigns to you
  • Then add one more line of code

  <h1>say Hello</h1>
  <script type="module">
      import '/main';
      // import '/style.css'
      import css from '/style.module.css'
      console.log(css);
      document.querySelector('h1').className = css.text;
  </script>
  Copy the code

  • This is where the CSS works.