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

2. 使用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

2. 使用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：销毁完毕