启动VUE项目环境搭建

拿到一个VUE项目,在Windows下怎么跑起来,解析项目结构和用途

1、环境搭建
本机装好 Node + npm环境

全局安装 vue-cli

npm install -g @vue/cli
# 校验是否安装成功
vue -V

2、安装依赖包

进入项目根目录,安装所有依赖
npm install

3、启动项目
进入项目文件夹启动运行
npm run serve

==============================================

node-demo/
├── index.js # 程序入口文件,node index.js 启动
├── package.json # 项目核心配置文件(重中之重)
├── package-lock.json # npm自动生成,锁定所有依赖精确版本,统一团队环境
├── node_modules/ # 所有安装的第三方依赖库(npm i 生成,禁止提交git)
├── .gitignore # git忽略文件:node_modules、日志、打包产物、本地配置
└── config.js # 自定义配置(端口、地址、密钥等)

核心文件作用
package.json
name/version:项目名、版本号
scripts:自定义命令(你刚才改的serve/build就写在这里)
dependencies:业务运行依赖(线上打包必须携带,vue、axios 都在这里)
devDependencies:开发依赖(仅本地打包、调试用,webpack、vue-cli-service、loader)
package-lock.json:杜绝 “我本地能跑,你电脑报错” 的版本不一致问题,必须入库

vue-cli-project/
├── public/ # 静态原文件,不会被webpack编译
│ ├── index.html # 页面宿主模板,webpack注入js、css
│ └── favicon.ico # 网站图标
├── src/ # 业务源码目录(日常99%开发都在这里)
│ ├── main.js # 全局入口,挂载Vue实例、注册全局组件/路由/axios
│ ├── App.vue # 根组件
│ ├── views/ # 页面级.vue文件(路由对应页面)
│ ├── components/ # 公共复用小组件(按钮、弹窗、表头)
│ ├── router/index.js # 路由配置:页面地址映射、路由守卫
│ ├── store/index.js # Vuex全局状态管理
│ ├── api/ # 接口请求封装(axios统一拦截、接口地址)
│ ├── assets/ # 图片、全局css、字体文件(会被webpack打包压缩)
│ └── utils/ # 工具函数:时间格式化、加密、正则、公共方法
├── babel.config.js # JS语法降级配置,把ES6+转成浏览器兼容JS
├── vue.config.js # 【Webpack核心配置】
# 代理跨域、打包路径、端口、别名、关闭sourceMap、配置legacy兼容
├── package.json # 启动命令、依赖管理(你修改openssl环境变量的地方)
├── node_modules/
├── .env / .env.development / .env.production # 环境变量文件
│ dev环境地址、生产接口地址分开配置
├── dist/ # npm run build 打包后的产物,部署到服务器的文件
└── .gitignore


node-server/
├── src
│ ├── app.js # 服务实例初始化(中间件、跨域、日志、异常捕获)
│ ├── server.js # 入口,监听端口启动服务
│ ├── controller/ # 控制器:接收请求、返回响应(业务逻辑入口)
│ ├── service/ # 业务逻辑层:数据库操作、复杂计算
│ ├── model/ # 数据库模型(Mysql/Mongo数据表映射)
│ ├── router/ # 路由:接口路径绑定对应controller方法
│ ├── middleware/ # 自定义中间件:token校验、权限、参数校验
│ ├── utils/ # 工具类
│ ├── config/ # 数据库连接、环境配置
│ └── logs/ # 运行日志
├── package.json
├── .env
└── dist(ts项目编译目录)


依赖解析:
"node_modules/uuid": {
"version": "3.4.0", // 实际安装的精准版本
"resolved": "下载源地址",
"integrity": "文件哈希值", // 校验安装包有没有被篡改、下载残缺
"deprecated": "提示过时的文案", // 你控制台一堆黄色警告就取自这里
"dependencies": {} // 这个包自身又依赖了哪些包
}