新建项目 vite+vue3+ts

使用 Vite

vite 官网： https://vitejs.dev/

创建新项目

yarn create vite my-vue-app

注意：vite 兼容性要求 nodejs 版本需要 12.0.0 以上

vite 有提供模板，可以直接通过命令创建相应模板
例： 使用 vue3 + ts

yarn create vite my-vue-app --template vue-ts

打开项目

cd my-vue-app
yarn
yarn dev

注意：多个 vite 项目会共用同一个端口，如果打开的页面不对，需要配置自定义端口，配置如下：

/** vite.config.ts */
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7526
  }
})

运行项目时发现 Network: use --host to expose
按照提示在 package.json 文件中的 scripts.dev 加上 --host，如果希望自动打开浏览器，也可以加上 --open

"scripts": {
    "dev": "vite --host --open",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  }

结果

这时就能自动在浏览器中打开了，也可以通过局域网IP访问