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

前言

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

步骤一：下载并安装 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.rhkb.cn/news/464963.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[signal] void QComboBox::currentTextChanged(const QString text)

[signal] void QComboBox::currentTextChanged(const QString text)

[signal] void QComboBox::currentTextChanged(const QString &text) This signal is sent whenever currentText changes. The new value is passed as text. This function was introduced in Qt 5.0. Note: Notifier signal for property currentText. 属性currentText的…
阅读更多...
Unity中实现伤害飘字或者提示飘字效果（DoTween实现版本）

Unity中实现伤害飘字或者提示飘字效果（DoTween实现版本）

&#xff01;&#xff01;&#xff01;在实现以下效果之前&#xff0c;一定要往项目中导入DoTween插件。 一、搭建测试场景 1、在场景中新建一个带有Text组件的游戏物体A&#xff0c;并把这个游戏物体A中Text组件的Color属性中alpha值为0&#xff0c;让文字在场景中隐藏。 …
阅读更多...
掌握PyQt5图形界面化工具及绑定爬虫程序

掌握PyQt5图形界面化工具及绑定爬虫程序

PyQT5——图形化界面 文章目录 PyQT5——图形化界面集成化图形界面工具为什么使用 \$ProjectFileDir$?示例场景其他 Varaiablespyuic参数解释整体含义示例使用PyQt5和pyuic 创建pyqt5的程序创建一个窗口app.exec\_()和sys.exit(app.exec_())的区别1. app.exec_()2. sys.exit(a…
阅读更多...
从零开始在本地服务器上安装OnlyOffice并进行跨地域协同编辑文件

从零开始在本地服务器上安装OnlyOffice并进行跨地域协同编辑文件

文章目录 前言1. 安装Docker2. 本地安装部署ONLYOFFICE3. 安装cpolar内网穿透4. 固定OnlyOffice公网地址 前言 本篇文章讲解如何使用Docker在本地Linux服务器上安装ONLYOFFICE&#xff0c;并结合cpolar内网穿透实现公网访问本地部署的文档编辑器与远程协作。 Community Editi…
阅读更多...
20241102在荣品PRO-RK3566开发板的预置Android13下适配宸芯的数传模块CX6603N

20241102在荣品PRO-RK3566开发板的预置Android13下适配宸芯的数传模块CX6603N

20241102在荣品PRO-RK3566开发板的预置Android13下适配宸芯的数传模块CX6603N 2024/11/2 18:04 在WIN10使用程序&#xff1a;ViewLink-4.0.7_0708-windows-x64.exe 在荣品PRO-RK3566开发板的预置Android13下使用&#xff1a;ViewLink-2023_12_21-release-0.2.6.apk adb install…
阅读更多...
智能AI合同审查系统如何优化合同风险管理的案例解读

智能AI合同审查系统如何优化合同风险管理的案例解读

在合同管理和合规性要求日趋严格的法律行业&#xff0c;智能合同审查系统能够大幅提升合同数据管理的效率和准确性。法律行业中&#xff0c;合同涉及金额、产品参数和条款细节较多&#xff0c;同时对合规性有极高的要求。特别是在高度受监管的行业&#xff08;如金融、医疗、制…
阅读更多...
C++《list的模拟实现》

C++《list的模拟实现》

在上一篇C《list》专题当中我们了解了STL当中list类当中的各个成员函数该如何使用&#xff0c;接下来在本篇当中我们将试着模拟实现list&#xff0c;在本篇当中我们将通过模拟实现list过程中深入理解list迭代器和之前学习的vector和string迭代器的不同&#xff0c;接下来就开始…
阅读更多...
Vue学习之路17----事件

Vue学习之路17----事件

可以自定义事件让子组件向父组件传值 1.使用emit 2.使用props 3.使用mitt 其实mitt和第一种方法类似&#xff0c;都用emitt事件&#xff0c;但是mitt不局限于父子之间通信&#xff0c;他可以在任意2个组件之间通信&#xff0c; 虽然需要安装&#xff0c;但mitt很小&#xff…
阅读更多...
网络安全认证的证书有哪些？

网络安全认证的证书有哪些？

在网络安全领域&#xff0c;专业认证不仅是个人技术能力的象征&#xff0c;也是职业发展的重要推动力。随着网络安全威胁的日益严峻&#xff0c;对网络安全专业人才的需求也在不断增长。本文将介绍一些网络安全认证的证书&#xff0c;帮助有志于从事网络安全行业的人士了解并选…
阅读更多...
D59【python 接口自动化学习】- python基础之异常

D59【python 接口自动化学习】- python基础之异常

day59 捕获异常常见问题 学习日期&#xff1a;20241105 学习目标&#xff1a;异常 -- 75 避坑指南&#xff1a;编写捕获异常程序时经常出现的问题 学习笔记&#xff1a; 捕获位置设置不当 设置范围不当 捕获处理设置不当 嵌套try-except语法错误 总结 位置&#xff0c;范围…
阅读更多...
yelp数据集上试验SVD,SVDPP,PMF,NMF 推荐算法

yelp数据集上试验SVD,SVDPP,PMF,NMF 推荐算法

SVD、SVD、PMF 和 NMF 是几种常见的推荐算法&#xff0c;它们主要用于协同过滤和矩阵分解方法来生成个性化推荐。下面是对每种算法的简要介绍&#xff1a; 1. SVD&#xff08;Singular Value Decomposition&#xff09; 用途&#xff1a;SVD 是一种矩阵分解技术&#xff0c;通…
阅读更多...
C++ | Leetcode C++题解之第540题有序数组中的单一元素

C++ | Leetcode C++题解之第540题有序数组中的单一元素

题目&#xff1a; 题解&#xff1a; class Solution { public:int singleNonDuplicate(vector<int>& nums) {int low 0, high nums.size() - 1;while (low < high) {int mid (high - low) / 2 low;mid - mid & 1;if (nums[mid] nums[mid 1]) {low mid…
阅读更多...
Python练习7

Python练习7

Python日常练习 题目&#xff1a; 编写程序&#xff0c;输出由1、2、3、4这四个数字组成的每位数都不相同的所有三位数 要求&#xff1a; 每个数字用换行隔开 --------------------------------------------------------- 注意&#xff1a; 部分源程序给出如下。请勿改动…
阅读更多...
RK3568开发板静态IP地址配置

RK3568开发板静态IP地址配置

1. 连接SSH MYD-LR3568 开发板设置了静态 eth0:1 192.168.0.10 和 eth1:1 192.168.1.10&#xff0c;在没有串口时调试开发板&#xff0c;可以用工具 SSH 登陆到开发板。 首先需要用一根网线直连电脑和开发板&#xff0c;或者通过路由器连接到开发板&#xff0c;将电脑 IP 手动设…
阅读更多...
MySQL45讲 第八讲 事务到底是隔离的还是不隔离的？

MySQL45讲 第八讲 事务到底是隔离的还是不隔离的？

文章目录 MySQL45讲 第八讲 事务到底是隔离的还是不隔离的&#xff1f;MVCC 实现原理事务 ID 与数据版本一致性视图 总结 MySQL45讲 第八讲 事务到底是隔离的还是不隔离的&#xff1f; 在 MySQL 的事务处理中&#xff0c;事务隔离级别与数据一致性是至关重要的概念。可重复读隔…
阅读更多...
【工具变量】中国制造2025试点城市数据集（2000-2023年）

【工具变量】中国制造2025试点城市数据集（2000-2023年）

数据简介&#xff1a;《中国制造2025》是中国ZF于2015年5月8日印发的一项战略规划&#xff0c;旨在加快制造业的转型升级&#xff0c;提升制造业的质量和效益&#xff0c;实现从制造大国向制造强国的转变。该规划是中国实施制造强国战略的第一个十年行动纲领&#xff0c;明确提…
阅读更多...
任务中心全新升级，新增分享接口文档功能，MeterSphere开源持续测试工具v3.4版本发布

任务中心全新升级，新增分享接口文档功能，MeterSphere开源持续测试工具v3.4版本发布

2024年11月5日&#xff0c;MeterSphere开源持续测试工具正式发布v3.4版本。 在这一版本中&#xff0c;系统设置方面&#xff0c;任务中心支持实时查看系统即时任务与系统后台任务&#xff1b;接口测试方面&#xff0c;新增接口文档分享功能、接口场景导入导出功能&#xff0c;…
阅读更多...
CUDA下载和安装

CUDA下载和安装

CUDA下载和安装 前言下载安装后续添加参考链接 前言 由于我需要运行的代码与我当前的CUDA版本不兼容,所以我现在需要进行CUDA的更新,下载一个低版本的CUDA以匹配我的Pytorch 下载 CUDA下载地址:CUDA下载链接 选择适合自己的版本 由于我是要运行一个开源项目,我选择对应的CU…
阅读更多...
Multimodal Reasoning with Multimodal Knowledge Graph

Multimodal Reasoning with Multimodal Knowledge Graph

摘要 大型语言模型&#xff08;llm&#xff09;的多模态推理常常存在幻觉和llm中存在缺陷或过时的知识。一些方法试图通过使用文本知识图来缓解这些问题&#xff0c;但其单一的知识形态限制了全面的跨模态理解。本文提出了多模态推理与多模态知识图&#xff08;MR-MKG&#xf…
阅读更多...
Git代码托管（三）可视化工具操作（1）

Git代码托管（三）可视化工具操作（1）

常见的可视化操作工具有 一、官方网页 如码云、gitlab&#xff0c;自带了常见的git操作。 以码云为例&#xff1a; 1、创建分支&#xff1a; 进入分支目录&#xff0c;点击 新建分支 按钮&#xff0c; 在弹出框中输入新分支名称&#xff0c;点击确定即可一键创建分支&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023