[VUE]框架网页开发1 本地开发环境安装

ops/2024/11/8 14:00:28/

前言

其实你不要看我的文章比较长，但是他就是很长！步骤其实很简单，主要是为新手加了很多解释！

步骤一：下载并安装 Node.js

  1. 访问 Node.js 官网： Node.js — Download Node.js®

  2. 下载 Windows 64 位版本： 选择适合你操作系统的版本进行下载。

  3. 安装 Node.js： 安装过程基本只需点击“Next”即可完成。

  4. 检查环境变量： 安装完成后，检查环境变量是否已自动配置。如果未配置，可以手动添加系统变量。

如果没有设置，手动添加一下！

系统变量：NODE_PATH

路径：你的安装目录

验证下环境变量和安装完毕：

node -v
npm -v

 步骤二：修改 npm 路径配置（如果安C磁盘空间足够大就忽略）

因为后续创建的VUE工程目录默认会保存在安装node的文件中！npm安装的全局模块和缓存默认安装在C:\Users\用户名\AppData\Roaming\npm文件夹里！

更换目录就随便找个地方大的位置创建两个文件夹，

修改全局模块安装路径： 默认情况下，npm 安装的全局模块和缓存会存放在 C:\Users\用户名\AppData\Roaming\npm 文件夹中。为了方便管理，可以将其路径修改到 Node.js 安装目录下。

创建两个文件夹：

在命令窗口执行： 

npm config set prefix "E:\Nodejs\node_global"
npm config set cache "E:\Nodejs\node_cache"

里面绿色字是我的目录，你要改成你的！

里面绿色字是我的目录，你要改成你的！

里面绿色字是我的目录，你要改成你的！

如果不修改镜像地址，使用淘宝的或者阿里云的

 但是也有可能链接不上！

npm config set registry http://registry.npm.taobao.org

步骤三：安装 cnpm

由于 npm 在国内的下载速度较慢，建议安装 cnpm（淘宝 npm 镜像）：

npm install -g cnpm --registry=http://registry.npm.taobao.org

 但是也有可能不管用，那你就恢复回来默认的，具体命令请问AI

步骤四：安装 Vue 脚手架

安装 Vue CLI：

npm install -g @vue/cli-initnpm install -g @vue/cli

 

  1. 验证安装：

    vue -v

    出现错误

重新指定下环境变量,把下面路径放在环境变量的path中!

 

如果还不行那就

确保您的 npm 是最新版本，可以使用以下命令更新 npm：

npm install -g npm

如果您之前已经安装过 Vue CLI，但仍然无法使用 vue 命令，可以尝试重新安装 Vue CLI：

npm uninstall -g @vue/cli
npm install -g @vue/cli

最终： 

步骤五：安装 webpack

npm install -g webpack

如果不安装 webpack，你可能会遇到以下问题和限制：

1. **无法使用 Vue CLI 创建项目**
Vue CLI 内部依赖 webpack 来构建和管理项目。如果你没有安装 webpack，Vue CLI 将无法正常工作，从而无法创建新的 Vue 项目。

2. **无法使用现代前端工具和插件**
webpack 提供了丰富的插件和加载器生态系统，可以处理各种类型的资源（如 JavaScript、CSS、图片、字体等）。如果没有 webpack，你将无法使用这些现代前端工具和插件，从而限制了项目的功能和性能优化。

 3. **无法进行模块打包**
webpack 是一个模块打包工具，可以将多个模块打包成一个或多个文件。如果没有 webpack，你将无法进行模块打包，这会导致项目中的资源无法有效地管理和优化。

4. **无法进行代码分割**
代码分割（Code Splitting）是优化大型应用程序性能的重要手段。webpack 支持代码分割，可以将应用程序的代码分割成多个小块，按需加载。如果没有 webpack，你将无法进行代码分割，从而影响应用程序的加载速度和性能。

 5. **无法使用开发服务器和热模块替换**
webpack 提供了开发服务器（webpack-dev-server）和热模块替换（HMR）功能，可以在开发过程中实时重新加载代码，提高开发效率。如果没有 webpack，你将无法使用这些功能，开发体验会大打折扣。

6. **无法自定义构建过程**
webpack 允许你自定义构建过程，添加新的加载器、插件等。如果没有 webpack，你将无法自定义构建过程，从而限制了项目的灵活性和扩展性。

7. **无法使用现代前端框架和库**
许多现代前端框架和库（如 React、Angular 等）都依赖 webpack 进行构建和打包。如果没有 webpack，你将无法使用这些框架和库，从而限制了项目的开发选择。

总结

虽然 Vue CLI 内部已经集成了 webpack，但在某些情况下（如自定义构建过程、使用其他前端框架等），你可能需要手动安装和配置 webpack。如果不安装 webpack，你将无法使用 Vue CLI 创建项目，也无法享受 webpack 提供的各种功能和优化手段，从而限制了项目的开发和性能优化。

步骤六：创建 Vue 项目

创建vue项目方式一：使用命令行创建(cmd启动在那个文件夹就创建在哪里)

假设你在 E:\Nodejs 目录下打开命令提示符并运行 vue init webpack vue-demo 命令，那么项目文件会被创建在 E:\Nodejs\vue-demo 目录下！！！

1.打开命令提示符（管理员权限）： 
vue init webpack vue-demo
vue-demo就是你项目名字！可以修改！

按照提示完成项目配置： 可以选择默认配置，按回车键完成。 中间会问你一些问题，仔细看看，然后无脑回车填Y

2.进入创建好的项目目录（vue-demo 这是我的，去找你的）打开命令窗口并安装依赖：

我自己创建了文件夹移动了一下

在这里打开CMD

 为我的新项目执行依赖包安装

npm install

这个命令需要在你刚才创建的vue-demo 项目文件中运行的CMD命令中运行！意思为这个项目安装依赖包！你可以i可以安装全局也就是整个电脑都安装了！这样未来创建的项目也可以用了！否则每个项目都需要单独安装！

每次修改了 package.json 都需要安装一次~！

npm install使用场景

  1. 初始化项目

    • 当你克隆一个新项目或从零开始创建一个项目时，运行 npm install 会自动安装项目所需的所有依赖包。

  2. 更新依赖

    • 如果你修改了 package.json 文件中的依赖项，运行 npm install 会根据新的依赖配置重新安装所有包。

  3. 安装新依赖

    • 当你需要添加新的依赖包时，可以使用 npm install <package-name> 命令。

  4. 安装开发工具

    • 当你需要安装开发工具（如 webpack、eslint 等）时，可以使用 npm install --save-dev <package-name> 命令。

  5. 安装全局工具

    • 当你需要安装全局工具（如 Vue CLI、create-react-app 等）时，可以使用 npm install -g <package-name> 命令。

npm install 是 Node.js 包管理工具 npm（Node Package Manager）中的一个命令，用于安装项目所需的依赖包。以下是 npm install 的主要功能和使用场景：

npm install主要功能

  1. 安装项目依赖

    • 当你在项目根目录下运行 npm install 时，npm 会根据项目根目录中的 package.json 文件中的 dependencies 和 devDependencies 字段，自动下载并安装所有依赖包。

  2. 安装指定包

    • 你可以通过 npm install <package-name> 命令安装指定的包。例如：

      npm install vue

    • 这会在当前项目的 node_modules 目录下安装 vue 包，并将其添加到 package.json 文件的 dependencies 字段中。

  3. 安装开发依赖

    • 使用 --save-dev 或 -D 选项可以安装开发依赖包。例如：

      npm install --save-dev webpack

    • 这会将 webpack 包安装到 node_modules 目录，并将其添加到 package.json 文件的 devDependencies 字段中。

  4. 安装全局包

    • 使用 -g 或 --global 选项可以安装全局包。例如：

      npm install -g @vue/cli

    • 这会将 @vue/cli 包安装到全局环境中，可以在任何地方使用。

  5. 安装特定版本的包

    • 你可以通过指定版本号来安装特定版本的包。例如：

      npm install vue@2.6.14

    • 这会安装 vue 的 2.6.14 版本。

  6. 安装最新版本的包

    • 使用 @latest 可以安装包的最新版本。例如：

      npm install vue@latest
# 安装项目依赖
npm install# 安装指定包
npm install vue# 安装开发依赖
npm install --save-dev webpack# 安装全局包
npm install -g @vue/cli# 安装特定版本的包
npm install vue@2.6.14# 安装最新版本的包
npm install vue@latest

运行项目：

npm run dev

创建vue项目方式二：使用 Vue UI 创建

启动 Vue UI：

vue ui

在浏览器中打开 Vue 项目管理页面： 按照提示创建新项目。

项目结构

  • node_modules： 所有依赖项

  • public： 静态内容

    • favicon.ico： 小图标

    • index.html： 入口 HTML 文件

  • src： 项目执行的主目录

    • assets： 静态文件（图片、JSON、图标、字体等）

    • components： 组件

    • router： 路由配置文件

    • views： 放置页面内容

    • App.vue： 项目的根组件

    • main.js： 项目的主入口文件

  • .gitignore： Git 忽略文件

  • babel.config.js： Babel 配置文件

  • package.json： 所有依赖包配置文件

  • README.md： 项目文档

接下来用VScode 或者IDEA打开目录进入开发-

....此处省略十几天！

开发完毕以后

步骤七 运行项目

1.在自己的项目中再次执行安装依赖：

因为我们的依赖可能有更新

npm install

2.启动项目：

npm run dev

 

或者：

npm run serve

结果：

出错了！ 

解决 `npm run serve` 报错的问题

当你在 Vue 项目中运行 `npm run serve` 时，出现 `Missing script: "serve"` 错误，这通常是因为 `package.json` 文件中没有定义 `serve` 脚本。你可以通过以下步骤解决这个问题：

1. 检查 `package.json` 文件

打开项目根目录下的 `package.json` 文件，检查 `scripts` 部分是否包含 `serve` 脚本。

如果没有 `serve` 脚本，可以手动修改添加：

修改前

修改后

  "scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","serve": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","lint": "eslint --ext .js,.vue src test/unit test/e2e/specs","build": "node build/build.js"},

成功： 


2. 不行就继续使用 `npm run dev

如果你已经有一个 `dev` 脚本，并且它可以正常运行，那么你可以继续使用 `npm run dev` 来启动开发服务器。


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

在这种情况下，你可以运行：
npm run dev

总结

`npm run serve` 报错 `Missing script: "serve"` 通常是因为 `package.json` 文件中没有定义 `serve` 脚本。你可以通过手动添加 `serve` 脚本或继续使用 `npm run dev` 来解决这个问题。确保你的项目配置正确，并且依赖包已正确安装。

访问项目： 打开浏览器，访问 http://127.0.0.1:8080 查看项目运行效果。

这个端口会自动变化！

 

步骤八 关闭网页服务

在命令窗口按两次Ctrl+C


http://www.ppmy.cn/ops/131947.html

相关文章

idea | 搭建 SpringBoot 项目之配置 Maven

idea | 搭建 SpringBoot 项目之配置 Maven

目录 1 配置 Maven1.1 打开 settings.xml 文件1.2 配置本地仓库路径1.3 配置中央仓库路径1.4 配置 JDK 版本1.5 重新下载项目依赖 2 配置 idea2.1 在启动页打开设置2.2 配置 Java Compiler2.3 配置 File Encodings2.4 配置 Maven2.5 配置 Auto Import2.6 配置 Cod…
阅读更多...
第二章 虚拟仪器及其构成原理

第二章 虚拟仪器及其构成原理

目录 第二章 虚拟仪器及其构成原理 第七章 基于VXI总线的虚拟仪器 7.2 VXI总线系统的体系结构 7.3.1 系统和硬件 7.5 PXI总线与PCI性能比较 第二章 虚拟仪器及其构成原理 2.4 虚拟仪器及其系统集成 2.4.1 虚拟仪器硬件组成 接口硬件&#xff1a;根据不同的标…
阅读更多...
达梦数据库安全管理

达梦数据库安全管理

1、概述 数据库安全管理是指采取各种安全措施对数据库及其相关文件和数据进行保护。数据库 系统的重要指标之一是确保系统安全&#xff0c;以各种防范措施防止非授权使用数据库&#xff0c;主要通过数 据库管理系统进行实现。数据库系统中一般采用用户标识与鉴别、存取控制以及…
阅读更多...
Hive 操作基础（进阶篇☝️）

Hive 操作基础（进阶篇☝️）

Hive 入门操作 创建表 EXTERNAL&#xff0c;创建外部表 PARTITIONED BY&#xff0c; 分区表 CLUSTERED BY&#xff0c;分桶表 STORED AS&#xff0c;存储格式 LOCATION&#xff0c;存储位置 ......&#xff0c; 数据类型 内部表 创建普通内部表: create table [if not exists…
阅读更多...
第73期 | GPTSecurity周报

第73期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
闪耀CeMAT亚洲物流展，驭势科技发布第五代U-Drive®智驾系统

闪耀CeMAT亚洲物流展，驭势科技发布第五代U-Drive®智驾系统

11月5日&#xff0c;驭势科技于CeMAT首日&#xff0c;举行主题为 “驱动物流创新引擎&#xff0c;重塑产业新质生态”的新品发布会&#xff0c;正式发布第五代U-Drive智能驾驶系统。来自各行业的生态伙伴及业内专家莅临现场&#xff0c;共同见证驭势科技在自动驾驶技术领域的又…
阅读更多...
元戎启行嵌入式面试题及参考答案

元戎启行嵌入式面试题及参考答案

介绍下 CAN 通信原理 控制器局域网（CAN）是一种串行通信协议，主要用于汽车、工业自动化等领域的电子控制单元（ECU）之间的通信。 其通信原理是基于多主站架构。在总线上，多个节点（设备）都可以主动发起通信。CAN 协议使用差分信号来传输数据，通过两条信号线 CAN_H 和 CAN…
阅读更多...
99、Python并发编程：多线程的问题、临界资源以及同步机制

99、Python并发编程：多线程的问题、临界资源以及同步机制

引言 多线程技术的引入&#xff0c;可以帮助我们实现并发编程&#xff0c;一方面可以充分利用CPU计算资源&#xff0c;另一方面&#xff0c;可以在用户体验上带来极大的改善。但是&#xff0c;多线程技术也存在一些问题。本文就来简单聊一下多线程引入导致的问题&#xff0c;以…
阅读更多...
最新文章

Copyright @ 2022~2023