vue项目环境搭建

vue项目环境搭建

安装Nodejs环境

地址:https://nodejs.org/en/download/

安装包管理工具

# 推荐安装yarn
npm install --global yarn
# 或者安装cnpm
npm config set registry http://registry.npm.taobao.org

创建项目

  1. 使用vite创建
npm init vite@latest

①输入项目名称
②选择项目模板
③是否使用TS
④项目构建完成
⑤快捷方式 yarn create vite 项目名 --template vue

  1. 使用webpack创建
yarn init -y

①初始化 package.json文件 yarn init -y
②安装webpack npm install webpack webpack-cli -D
③创建src文件夹,存放源代码
④创建webpack.config.js文件、编写webpack配置
⑤在package.json文件中添加build命令

启动项目

  1. 使用npm包启动方式
npn run dev
  1. 使用yarn包启动方式
yarn run serve

目录结构

.husky(代码提交管理校验)
build(项目打包配置)
dist1(项目打包后文件)
lib(项目依赖插件)
public(项目静态资源)
types(项目全局类型检测)
env(项目全局变量输出)
package(项目依赖配置)
vite.config(项目构建工具配置)
src(项目业务)
	api-(与服务端交互接口)
	assets-(资源文件)
	components-(UI组件)
	design-(布局样式)
	directives-(自定义指令)
	enums-(缓存枚举值)
	hooks-(全局钩子函数)
	layouts-(主题结构)
	locales-(国际化配置)
	router-(路由配置)
	settings-(项目配置)
	store-(全局状态管理)
	utils-(项目工具类)
	views-(页面)
	App.vue-(项目的主组件)
	main.js-(项目入口)

生命周期

setup实例创建时
onBeforeMount:DOM即将挂载
onMounted:DOM挂载完毕
onBeforeUpdate:DOM即将更新
onUpdated:DOM更新完毕
onBeforeUnmount:即将销毁
onUnmounted:销毁完毕

posted on   何苦->  阅读(77)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示