Vite 的上手使用很简单，直接运行 npm create vite@latest 命令即可。兼容性注意:Vite 需要 Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。1.3.1 构建 Vite 项目 使用 NPM:$ npm create vite@latest npm create 其...
1.创建一个文件夹VueApp,运行cmd转到该目录下,执行命令:npm create vite@latest 2.然后转到vuedemo目录下命令:cd vuedemo, 3.执行命令:npm install。文件夹内会新添加node_modules文件夹和package-lock.json文件。 npm会根据项目根目录下的package.json文件中的dependencies和devDependencies字段来安装所需的包。这些...
1.运行创建项目命令 # 使用 npm npm create vite@latest # 使用 yarn yarn create vite # 使用 pnpm pnpm create vite 1. 2. 3. 4. 5. 6. 注意点:Vite 需要 Node.js 版本 >= 12.0.0。在cmd窗口输入 node -v 1. 即可查询到我们当前的一个node的版本。 2.输入项目名称,默认是 vite-project 3.选...
.env.prod文件 测试环境配置 以api url为例 VITE_APP_PROXY_URL=/apiProd 配置项目 配置ts导入 找不到模块“./XXX.vue”或其相应的类型声明 在src 下新建一个vite-env.d.ts /// <reference types="vite/client" />declaremodule'*.vue'{importtype{DefineComponent}from'vue'constcomponent:DefineComponent<{...
在磁盘的合适位置上,创建一个空目录用于存储多个前端项目 用vscode打开该目录 在vocode中打开命令行运行如下命令 代码语言:javascript 复制 npm create vite@latest 第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了 注意:选择vue+JavaScript选项即可 ...
1.创建相关应用模版请参考链接:去中心化的前端构建工具 — Vite 2.完成创建后就可以在github中查看到新增的Vite仓库 二、 本地编写 Vite后台项目最佳起始点 1.将应用模版克隆到本地 首先假定你已经安装了Git、node,没有安装请移步node官网进行安装。克隆项目: ...
Vite创建Vue 3项目 Vite提供了两种创建项目的命令,手动创建项目的命令和通过模板自动创建项目的命令。 1.手动创建项目的命令 使用npm或yarn包管理工具都可以搭配Vite手动创建项目,具体命令如下。 #使用npm create命令创建项目 npm create vite@latest #使用yarn create命令创建项目 ...
直接下一步,就生成了一个Vite构建的Vue3项目了。 code vite-vue3 然后我们通过命令code vite-vue3直接打开刚刚创建的项目 image.png 看下Vite项目的目录结构,有前端开发经验的小伙伴都知道,webpack项目的编译入口文件是main.js,配置文件是vue.config.js;而我们用Vite构建的项目的编译入口文件是index.html,配置文件...
在我们项目中引入自定义组件或者JS\TS文件,我们会采用相对路径来寻找,比如: importBookfrom'../components/Bppk.vue' 这个配置在Vue\cli脚手架中默认可以使用,但是在Vite搭建的Vue3项目中我们需要配置一下; 整体配置如下: // vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv...
一、使用vite初始化项目 pnpm create vite@latest 兼容性注意 Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目...