01-初始化Vite项目

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

---

源码地址：GitHub / 码云

---

初始化Vite项目

🎯 目标

用 vite2 创建 vue3 + TypeScript 项目，并精简项目代码。

🍸 准备

开发环境

名称	版本
Node.js	14.17.3
NPM	6.14.13
浏览器	Chrome 93.0.4577.82

💡 以上是我的本地环境。

初始化Vite

执行初始化命令后会有提示，按提示操作即可（上下键选择、回车确认）。

打开 CMD ，输入 vite 初始化命令：

npm init @vitejs/app

控制台输出内容如下：

√ Project name: ... vvte
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in F:\WorkSpace\bee-code\bee-dev-ui...

Done. Now run:

  cd vvte
  npm install
  npm run dev

启动项目

# 进入项目目录
cd vvte
# 安装依赖
npm install
# 在dev模式下运行
npm run dev

在浏览器输入 http://localhost:3000 访问。

🌈 Coding

精简 HelloWorld.vue

代码如下：

<template>
  <h2>Hello World!</h2>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup: () => {},
});
</script>

精简 App.vue

代码如下：

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
});
</script>

💡 静态文件 /src/assets/logo.png 和/public/favicon.icon 也可以删除，看你心情了。

🎭 验证

项目精简成了一张白纸，打开页面显示 “Hello World！”。OK，事情刚开始总是轻松愉快的。

---

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。