一、手把手教你创建Vue3后台模板─────Vue3 + Vite 实现项目搭建

Vite

创建 Vue3 项目有两种常见的方式，一种是想 vue2 版本一样使用脚手架工具创建，创建 vue3 项目的脚手架必须是4版本以上的，另一种方法就是使用 vite 创建，为什么使用 vite 呢？因为快！贼快！

vite 官网：Vite | 下一代的前端工具链

安装 Vite

安装 vite 构建工具：

npm install -g create-vite-app

 Vite 创建 vue3 项目

创建一个项目名称为 vue3-admin-template 的项目：

# npm 6.x
npm init vite@latest vue3-admin-template --template vue

# npm 7+，需要加上额外的双短横线
npm init vite@latest vue3-admin-template -- --template vue

cd vue3-admin-template
npm install
npm run dev

vite.config.js 配置server

server: {

    host: '0.0.0.0',

    port: 8188, // 自定义端口

    open: true // 设置服务启动时是否自动打开浏览器

  }

 浏览器输入ip端口打开

 

如果你看到这个页面，那么恭喜你运行成功啦

注：

npm -v 查看npm版本号