使用vite搭建前端项目

1、在vscode 终端那里执行创建前端工程项目,其中shop-admin为项目名称:

复制代码
npm init vite-app  shop-admin

提示如需安装其他依赖执行npm install ....,否则忽略(第三步再讲)。

2、执行npm run dev 命令直接运行创建好的项目,在浏览器打开链接地址,可观看前端效果。

复制代码
npm run dev 

3、如需要在项目中使用库,可在项目中执行使用npm install 命令执行安装,例如引入less库

复制代码
less:npm install less less-loader -D

4、使用vite打包命令,这里只是简单讲述打包,域名配置代理,那一部分跳过不讲。

复制代码
npm run build

执行打包命令后,可以用看到,多一个dist目录。dist目录下为打包结果。

相关推荐
Rain5094 分钟前
谁动了我的 URL?——记一次微前端“灵异 Bug“的排查实录
前端·vue.js·人工智能·前端框架·bug·ai编程
bjzhang7528 分钟前
使用HTML+CSS美化上传进度条展示
前端·css·html
何以解忧,唯有..34 分钟前
Vue 3 响应式核心:ref() 与 reactive() 的深入解析与实战
前端·javascript·vue.js
晴天1638 分钟前
Chrome DevTools Protocol(CDP)分享-Day36
前端·chrome·chrome devtools
风骏时光牛马39 分钟前
程序员的职场成长:技术之外,更要修炼底层思考力
前端
YWL40 分钟前
CSS变量与预处理器
前端·css
朱 欢 庆4 小时前
云服务器附件备份到本机内网服务器
运维·服务器·前端·经验分享
支支დ9 小时前
VO by Vercel 前端特定优势:为什么它是构建 AI 应用的新范式
前端·人工智能
香芋芋圆10 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF10 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记