ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
Vite 官方文档: **** 下面演示创建一个名为`learn-vue3-vite`项目,步骤如下: **1. 创建项目** ```shell ## 创建项目 > npm create vite@latest * ? Project name: learn-vue3-vite --输入项目名 * ? Selecta framework: * vue --选中vue ? Select a variant: * vue-ts --选择vue-ts ## 然后就创建了 learn-vue3-vite 项目 Scaffolding project in D:\vue3_\learn-vue3-vite... Done. Now run: cd learn-vue3-vite npm install npm run dev ``` **2. 启动项目** ```shell > cd learn-vue3-vite > npm install > npm run dev ``` 访问 http://localhost:3000/ 看到下面页面说明项目创建并启动成功了。 ![](https://img.kancloud.cn/77/c5/77c59ac37c834c562ed62208e0a72acb_780x397.jpg) **3. 项目目录介绍** ``` |—— projectName | |—— .vscode | |—— node_modules #npm加载的项目依赖模块 | |—— public #公共资源目录 | | |—— favicon.ico | |—— src #我们要开发的目录,基本上要做的事情都在这个目录里 | | |—— assets #放置一些图片,如logo等 | | | |—— logo.png | | |—— components #目录里面放了一个组件文件,可以不用 | | | |—— HelloWorld.vue | | |—— App.vue #项目入口文件 | | |—— env.d.ts | | |—— main.ts #项目的核心文件 | |—— .gitignore | |—— index.html #首页入口文件,你可以添加一些 meta 信息或统计代码啥的 | |—— package-lock.json | |—— .babel.config.js | |—— package.json #项目配置文件 | |—— README.md #项目的说明文档,markdown 格式 | |—— tsconfig.json | |—— tsconfig.node.json | |—— vue.config.ts ```