vite的开箱即用

• 在vite官方文档中对于vite的使用是通过 npm or yarn 命令 init OR create @vitejs/app 创建项目。但在尤雨溪的一场直播中讲到了vite的从0开始，通过使用vite实现类似live server或http-server的功能

  • 首先我们使用yarn下载vite 完成后会看到目录多出的packge和nodemodule

    • 下载命令 : yarn add vite

  • 接下来我们创建一个index.html

    • 加入一个h1标签 say Hello
    • image-20210619162813997.png

  • 打开package.json文件

    • 内容大概是这样

      • image-20210619162950409.png

    • 我们增加一个vite命令的简写保存

      • image-20210619163057675.png

  • 随后将我们的demo跑起来

    • 命令 yarn dev

    • 浏览器打开提示出的本地服务器地址

      
      image-20210619163453865.png

• 以上是vite的简单使用，接下来我会开始讲 link 以及 import的使用

html文件内的import使用

• 目前的主流浏览器为ES规范的 <script type="module"></script>增加了支持

• 首先我们在html文件内增加一个 script 标签并引入main.js

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

  • 根目录下创建main.js

    console.log('main.js Hello')
    

  • 回到浏览器就会发现main.js引入并执行了

• 到这里已经学会在html内使用import，接下来会再讲一下vite中对css文件的一些操作（目前深度不够，直播中讲的一些东西还不理解，下面讲一下直播中的操作）

vite下使用import引入css文件以及引入 module.css的不同

• 首先我们在目录下创建style.css文件 写入

  • h1{
        color : red;
    }
    

• 回到html中 增加 import 回到浏览器就会发现css文件生效了

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

• 上一步操作很简单 也较容易理解，接下来是引入module.css

  • 接下来我们注释掉之前引入的css文件在根目录下创建一个新的文件 style.module.css并写入

  • .text{
        color : blue;
    }
    

  • 回到html中增加 import css from '/style.module.css' 之后console一下这个 css 变量

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

  • 我们会发现 css 变量打印的结果是一个对象 键值为 你设置的css类名 ：vite帮你分配的类名
  • 接下来再加一行代码

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

• 到这里会发现css生效了。