vue2 结合 npm 怎么上手？新手入门实操指南

不少刚接触前端开发的同学,一提到 vue2 和 npm 就犯懵：到底怎么用 npm 来管理 vue2 项目？从环境搭建到项目打包，每一步该咋操作？这篇文章把新手最常碰到的问题拆解开，用大白话+实操步骤讲清楚，帮你从「两眼一抹黑」到能自己跑通 vue2 项目流程～

先把基础环境配好——node、npm、vue - cli 咋装？

想玩明白 vue2 + npm，得先把「地基」打好，这里要装的东西不少，但步骤不难，一个个说～

为啥要装 node？npm 和 node 啥关系？

简单说,node 是 JavaScript 的运行环境，就像手机得装安卓/iOS 系统才能跑 App 一样，前端项目里的代码（尤其是后端逻辑、打包工具这些）得靠 node 才能跑起来，而 npm 是 node 自带的「包管理器」，相当于手机里的应用商店，能帮你下载、管理项目要用的第三方代码（vue、axios 这些库），所以想用好 npm，得先把 node 装上～

怎么检查自己电脑有没有装 node 和 npm？

打开电脑的「命令行工具」（Windows 用 cmd 或 PowerShell，Mac/Linux 用终端），输入这两个命令：

```bash node -v npm -v ```

如果能弹出类似 v16.18.0、19.2 这样的版本号，说明已经装过；要是提示「不是内部或外部命令」，就得去 node 官网 下载「LTS 长期支持版」（别选最新的实验版，稳定最重要），安装时注意勾选「自动安装 npm」选项，装完再输上面的命令验证下～

vue - cli 是干啥的？怎么用 npm 装？

vue - cli 是 vue 官方的「脚手架工具」——可以理解成「项目模板生成器」，能帮你快速搭好 vue2 项目的目录结构、配置文件这些基础框架，不用自己从零写，装它也得用 npm，在命令行输：

```bash npm install -g @vue/cli ```

这里 -g 表示「全局安装」，意思是电脑上所有项目都能用到这个工具，装完后，输 vue - V（注意 V 要大写），能看到类似 @vue/cli 5.0.8 的版本号，就说明装成功啦～

用 npm 初始化第一个 vue2 项目，步骤是啥？

环境配好后,终于能创建自己的 vue2 项目了！这一步新手容易晕，咱拆解成「创建→选配置→启动」三个环节讲～

初始化项目有哪几种方式？

vue - cli 给了两种常用方式：

• vue create 项目名：官方推荐的新方式，界面更友好，能选 vue2 或 vue3 模板；
• vue init webpack 项目名：偏老旧的方式（基于 webpack 模板），现在更建议用 vue create。

这里重点讲 vue create，因为它对新手更友好，还能灵活选功能～

执行 vue create 后，命令行里的选项咋选？

举个例子,想创建叫「my - vue2 - app」的项目，步骤如下：

1. 命令行输入 vue create my - vue2 - app，回车后会让你选「预设」；
2. 选 Manually select features（手动选择功能，别选默认的，默认可能少了路由、状态管理这些）；
3. 按空格勾选需要的功能：Babel（语法转换，让旧浏览器能跑新代码）、Router（路由管理）、Vuex（状态管理）、CSS Pre - processors（CSS 预处理器，Sass）这些；
4. 选 vue 版本：这里要 vue2，所以选 x；
5. 问「把 Babel、ESLint 这些配置放单独文件还是 package.json？」，选 In dedicated config files（单独文件，方便管理）；
6. 最后问「要不要保存这个预设？」，新手可以选 No（下次再配）；

等命令行跑完,项目就创建好啦！过程中别着急，慢慢选～

项目创建完，怎么启动开发服务器？

先通过 cd my - vue2 - app 进入项目目录，然后输入：

```bash npm run serve ```

等命令行输出类似 Local: http://localhost:8080/ 的地址，把它复制到浏览器打开，就能看到 vue 的默认欢迎页面啦～要是端口被占用（8080 被其他程序用了），命令行会提示新的端口，8081，用新地址就行～

npm 管理项目依赖，增删改查咋操作？

项目里要用的第三方库（axios 发请求、element - ui 做组件），都得靠 npm 管理，这部分得搞懂「依赖是啥」「怎么装」「怎么删」这些基础操作～

啥是项目依赖？devDependencies 和 dependencies 区别是啥？

依赖就是项目要「借力」的第三方代码，vue 本身、vue - router 这些，而 package.json 里分了两类：

• dependencies：生产环境也需要的依赖——比如用户访问线上网站时，必须要的 vue、axios 这些；
• devDependencies：只有开发时需要的依赖——比如代码检查工具 eslint、打包工具 webpack 这些，线上运行时用不到。

简单说：用户能看到的功能依赖，放 dependencies；开发时辅助你写代码的工具，放 devDependencies～

怎么用 npm 装新依赖？

分两种场景：

装生产环境依赖（axios），命令是：

```bash npm install axios --save ```

现在也可以简化成 npm i axios - S（- S 是 -- save 的缩写），装完后，axios 会被加到 package.json 的 dependencies 里～

装开发环境依赖（sass - loader，用来处理 Sass 语法），命令是：

```bash npm install sass - loader sass --save - dev ```

简化版是 npm i sass - loader sass - D（- D 是 -- save - dev 的缩写），装完后会加到 devDependencies 里～

注意：有些依赖需要搭配版本装，npm install element - ui@2.15.12（指定装 element - ui 的 2.15.12 版，适配 vue2），避免装到 vue3 版本的库导致冲突～

项目里的 package.json 和 package - lock.json 有啥用？

package.json 像「依赖清单+脚本配置表」：里面记着你装了哪些依赖、每个依赖的版本范围，还有 npm 脚本（npm run serve 对应的命令）。

package - lock.json 是「精确版本锁」：npm 装依赖时，会生成这个文件，把每个依赖的精确版本、下载地址都锁死，这样团队里其他人拉取项目时，执行 npm install 会严格按照这个文件装依赖，保证所有人的依赖版本完全一致，避免「我这能跑，你那报错」的情况～

怎么删除不需要的依赖？

比如想删刚装的 axios，命令是：

```bash npm uninstall axios ```

这样会把 axios 从 node_modules 文件夹和 package.json 的 dependencies 里一起删掉，如果要删的是开发依赖（eslint），得加 -- save - dev：

```bash npm uninstall eslint --save - dev ```

删完后,记得检查 package.json 里对应的依赖是不是没了，避免残留～

项目里的 npm 脚本，怎么玩得更顺手？

每个 vue2 项目的 package.json 里都有个 scripts 字段，这可是提高开发效率的「神器」！但新手往往不知道咋用，咱掰开揉碎讲～

package.json 里的 scripts 是干啥的？

看个例子：vue - cli 生成的项目里，scripts 通常长这样：

```json "scripts": { "serve": "vue - cli - service serve", "build": "vue - cli - service build", "lint": "vue - cli - service lint" } ```

这里的 serve、build 快捷命令」——你不用记 vue - cli - service serve 这么长的命令，只需要输 npm run serve，npm 就会帮你执行对应的操作，相当于给复杂命令起了个小名，方便调用～

怎么自定义 npm 脚本？

比如你想加一个「自动修复代码格式错误」的命令，步骤如下：

1. 打开 package.json，在 scripts 里加一行：

```json "lint:fix": "vue - cli - service lint --fix" ```

这样,执行 npm run lint:fix，就能自动修复 eslint 检测到的代码格式问题～

还能组合命令，比如想同时启动开发服务器和监听文件变化，加个：

```json "dev": "npm run serve && npm run watch" ```

不过注意 是「前一个命令成功执行后，再执行后一个」，如果想并行执行（同时跑），可以用 （但 Windows 系统可能不支持，得装额外工具），新手先掌握 就够～

碰到脚本执行报错，咋排查？

常见报错分几种情况：

• 端口冲突：npm run serve 报错「Address already in use」，说明 8080 端口被占了，可以改 vue.config.js 里的 devServer.port（比如改成 3000），或者关掉占用端口的程序；
• 依赖没装全：报错「module not found」，先执行 npm install 把依赖装全，再试；
• 语法错误：eslint 报错「Unexpected token」，看提示里的文件和行数，去对应的地方改代码格式；
• 命令拼写错：比如把 npm run serve 写成 npm run sever，自然找不到命令，仔细检查拼写～

先看命令行的报错信息,定位到「是端口、依赖、代码还是拼写问题」，再针对性解决～

vue2 项目打包上线，npm 咋操作？

开发完项目,得打包成静态文件部署到服务器上，让用户能访问，这一步关键是「打包命令+路径配置+部署」，一个个说～

打包命令是啥？打包后文件放哪？

在项目根目录执行：

```bash npm run build ```

执行完后,项目根目录会生成一个 dist 文件夹，里面就是编译好的静态文件：HTML、CSS、JS、图片等，这些文件就是要部署到服务器的内容～

打包时怎么配置生产环境的基础路径？

如果你的项目要部署到域名的子目录（https://xxx.com/my - vue - app/），直接打包会导致资源路径错误（JS 文件路径变成 /js/app.js，但实际要 /my - vue - app/js/app.js），这时候得改 vue.config.js 里的 publicPath：

```js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my - vue - app/' : '/' } ```

这样,生产环境（打包时）的基础路径是 /my - vue - app/，开发环境还是根路径 ，避免开发时路径出错～

打包后发现资源路径不对、页面空白咋办？

常见原因和解决方法：

• publicPath 配置错：检查 vue.config.js 里的 publicPath 是否和部署路径一致；
• 路由模式问题：如果用了 history 路由模式（URL 里没有 #），服务器得配置「404 fallback 到 index.html」，否则刷新页面会报 404，如果是 hash 模式（URL 里有 #），一般不会有这问题；
• 资源引入路径错：打开 dist/index.html，看里面的 JS、CSS 路径是不是以 publicPath 开头，比如配置了 /my - vue - app/，路径应该是 /my - vue - app/js/app.js 这样～

怎么把 dist 里的文件部署到服务器？

以 nginx 服务器为例，步骤大概是：

1. 把 dist 文件夹里的所有文件，传到服务器的 /usr/share/nginx/html 目录（或你自己指定的网站根目录）；
2. 修改 nginx 的配置文件（通常在 /etc/nginx/conf.d/default.conf），把 root 指向你的 dist 文件夹路径；
3. 重启 nginx（sudo service nginx restart），然后访问服务器域名，就能看到项目啦～

如果用其他服务器（Apache、Tomcat），原理类似：把 dist 里的文件放到网站根目录，配置好服务器规则就行～

vue2 + npm 踩坑实录：这些坑新手常掉，咋避？

新手实操时,总会碰到各种「奇奇怪怪」的报错，把高频坑列出来，教你怎么避坑～

装依赖时一直卡在 fetchMetadata 或者报错网络问题？

原因：npm 默认源在国外，国内访问慢甚至连不上，解决方法：

• 换国内镜像源：执行 npm config set registry https://registry.npm.taobao.org/

  版权声明

  本文仅代表作者观点，不代表Code前端网立场。
  本文系作者Code前端网发表，如需转载，请注明页面地址。