从零搭建一个Vue3+Vite+TypeScript项目

发布于:2023-01-19 ⋅ 阅读:(414) ⋅ 点赞:(0)

最近准备搭建工作室的官方网站,在这里记录一下项目搭建的过程。

一、前期准备

1.环境准备

  • Node.js版本大于12.0.0

2.开发工具

  • Visual Studio Code
  • Google Chrome

2.技术选型

  • Vue 3.2
  • Vite 3.0
  • vue-router4
  • vuex4
  • Element Plus
  • Volar
  • git

二、初始化项目

使用npm:

$ npm init vite@latest

使用yarn:

$ yarn create vite

使用pnpm:

$ pnpm create vite

在命令操作界面中,输入以上任意一条命令,然后按照提示操作即可完成项目创建。

                                                              在这里插入图片描述

项目创建完成之后,进入项目文件夹,使用npm install 完成项目初始化,最后npm run dev启动项目

                                                        在这里插入图片描述

访问http://127.0.0.1:5173,可以看到项目启动后的页面


                            在这里插入图片描述

三、工具安装

1.编辑器插件

  • Volar,VS Code的官方扩展插件,为Vue3提供了全面的开发支持。
  • Element Plus Snippets,为Element Plus组件提供了语法提示和代码补全

2.开发插件

  • vue-router
  • vuex
  • Element Plus
  • Axios
npm install vue-router@next vuex@next element-plus axios

官方文档:
vite: https://vitejs.cn/
vue3:https://cn.vuejs.org/


网站公告

今日签到

点亮在社区的每一天
去签到