vue项目环境搭建
vue项目环境搭建
安装Nodejs环境
地址:https://nodejs.org/en/download/
安装包管理工具
# 推荐安装yarn
npm install --global yarn
# 或者安装cnpm
npm config set registry http://registry.npm.taobao.org
创建项目
- 使用vite创建
npm init vite@latest
①输入项目名称
②选择项目模板
③是否使用TS
④项目构建完成
⑤快捷方式 yarn create vite 项目名 --template vue
- 使用webpack创建
yarn init -y
①初始化 package.json文件 yarn init -y
②安装webpack npm install webpack webpack-cli -D
③创建src文件夹,存放源代码
④创建webpack.config.js文件、编写webpack配置
⑤在package.json文件中添加build命令
启动项目
- 使用npm包启动方式
npn run dev
- 使用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:销毁完毕
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤