05-vite vite创建vue3项目

vite 创建 vue3 项目

历史发展

如何创建一个 vue3 的项目，我们以 vite@2.5.2 为例子

"devDependencies": {
"@vitejs/plugin-vue": "^1.10.2",
"vite": "^2.5.2"
}

• 将上面这段代码贴到 package.json 对应的属性的位置

• 运行： 1.pnpm install 2.pnpm dev 3.生成本地服务地址：http://localhost:5173/

• 查看控制台我们发现我们下载的版本 vite 是 2.9.18 , @vitejs/plugin-vue 是 1.102, 我们把整体的 package.json 文件贴一下

{
"name": "vite-vue3",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.24"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.10.2",
"vite": "^2.5.2"
}
}

• 没有提供 eslint，prettier 功能，需要自己增加，vite 默认支持这些内容，eslint 不支持保存文件自动做文件校验，但我们可以手动执行 eslint 命令可以实现
• Webpack vue-cli 通过下载配置 eslint-loader 来实现 eslint 检测功能

• public 存放静态文件，图片，一些不需要编译的内容，vite 提供路径映射让我们方便的 import
• src
  • assets 存放图片 ，通过 import 方式引入，可以编译成路径，可以做一些处理
  • main.js 入口文件
  • App.vue 与 传统项目创建的 App.vue 差不多
• index.html
  • Webpack，rollup 以 js 为 entry，编译入口一般来说是一个 js 文件
  • 对于 vite ，入口必然是一个 html 文件,
    • 与 vite 特性有关，一开始不编译 main.js App.vue, 让我们的浏览器直接加载 html 文件，通过 script 标签，加载script 的 src 指向的 main.js,这个js的请求到达 vite server
      以后，vite 查找 js 文件，然后才会对它进行编译，这是 vite 以 html 文件作为入口的一个很大的原因
• vite.config.js 存放 vite 的配置的位置
  • @vitejs/plugin-vue 官方提供的 vue3 的插件，支持 App.vue 等 sfc 写法，但是不支持 vue 的 jsx 的开发方式

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'

  // https://vite.dev/config/
  export default defineConfig({
  plugins: [vue()],
  })

  • 如果想要在 vue 中支持 jsx 的开发方式，需要下载一个官方推荐的插件 @vitejs/plugin-vue-jsx
    • pnpm i @vitejs/plugin-vue-jsx -D (我们参照视频下载 1.3.10 的版本)

    // vite.config.js
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueJsx from '@vitejs/plugin-vue-jsx'

    // https://vite.dev/config/
    export default defineConfig({
    plugins: [vue(), vueJsx()],
    })
    // App.jsx
    import { defineComponent } from 'vue'
    export default defineComponent({
    setup() {
    return ()=> {
    return <div>hello, write jsx in vue3</div>
    }
    }
    })