Vue3+Vite+TS后台项目 ~ 1.vite 创建项目

管什么真理无穷，进一寸有一寸的欢喜
—— 胡适

搭建 Vite 项目：

Vite 官方中文文档

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

# 使用 npm
$ npm init vite@latest

# 使用 yarn
$ yarn create vite

# 使用 pnpm
$ pnpm dlx create-vite

小编这里使用的是 npm

# 进入 存放项目的目录
cd '目录’

# 使用 npm 创建 vite 项目
npm init vite@latest

# 填写项目名称，默认 vite-project
? Project name: › vite-project

# 选择使用的框架
? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit-element
    svelte

# 是否使用 ts
? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

# 创建成功（！！！这里需要 npm install）
Done. Now run:

  cd shop_admin921
  npm install
  npm run dev

效果展示：

目录结构简述：

• node_modules 第三⽅包存储⽬录
  
  

• public 不需要经过代码编译的 纯静态资源

  • favicon.ico 浏览器标签页图标
    
    

• src 源文件

  • api 后台 API 接口封装（添加）
  • assets 公共资源⽬录，放图⽚等资源
  • components 公共组件
  • composables 通用的组合式 API（添加）
  • layout 页面布局模板（添加）
  • plugins 插件（添加）
  • router 路由相关模块（添加）
  • store 容器相关模块（添加）
  • styles 公共样式（添加）
  • utils 工具模块（添加）
  • views 路由⻚⾯组件存储⽬录（添加）
  • App.vue 根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
  • main.ts 整个项⽬的启动⼊⼝模块
  • vite-env.d.ts 补充 vite 类型声明
  • shims-vue.d.ts 补充 .vue 模块类型声明
    
    

• .gitignore Git 的忽略配置⽂件，告诉Git项⽬中要忽略的⽂件或⽂件夹

• README.md 说明⽂档

• index.html 单页面文件

• package-lock.json 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm install 时⼤家的依赖能保证⼀致

• package.json 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容

• tsconfig.json TypeScript 配置⽂件

• vite.config.ts Vite 配置⽂件

上传至 Gitee 进行版本管理：

Gitee/GitHub 版本管理这里不做赘述，可以参考这篇文章

2021搭建企业级后台（Vue + TS + Element Plus ）～ 2.Git版本管理（也是小编写的）