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：销毁完毕