[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-init

npm 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/908691.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++线程异步

C++线程异步

本文内容来自&#xff1a; 智谱清言 《深入应用C11 代码优化与工程级应用》 std::future std::future作为异步结果的传输通道&#xff0c;可以很方便地获取线程函数的返回值。 std::future_status Ready (std::future_status::ready): 当与 std::future 对象关联的异步操作…
阅读更多...
【Python】【数据可视化】【商务智能方法与应用】课程 作业一 飞桨AI Studio

【Python】【数据可视化】【商务智能方法与应用】课程 作业一 飞桨AI Studio

作业说明 程序运行和题目图形相同可得90分&#xff0c;图形显示有所变化&#xff0c;美观清晰可适当加分。 import matplotlib.pyplot as plt import numpy as npx np.linspace(0, 1, 100) y1 x**2 y2 x**4plt.figure(figsize(8, 6))# yx^2 plt.plot(x, y1, -., labelyx^2,…
阅读更多...
后端eclipse——文字样式：UEditor富文本编辑器引入

后端eclipse——文字样式：UEditor富文本编辑器引入

目录 1.富文本编辑器的优点 2.文件的准备 3.文件的导入 导入到项目&#xff1a; 导入到html文件&#xff1a; ​编辑 4.富文本编辑器的使用 1.富文本编辑器的优点 我们从前端写入数据库时&#xff0c;文字的样式具有局限性&#xff0c;不能存在换行&#xff0c;更改字体…
阅读更多...
基于springboot+小程序的汽车销售管理系统(汽车4)

基于springboot+小程序的汽车销售管理系统(汽车4)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 1、管理员实现了首页、个人中心、管理员管理、基础数据管理、论坛管理、公告信息管理、汽车管理、用户管理、轮播图信息等。 ​ 2、用户实现了注册、登录、首页、汽车类型、论坛、购物…
阅读更多...
江协科技STM32学习- P29 实验- 串口收发HEX数据包/文本数据包

江协科技STM32学习- P29 实验- 串口收发HEX数据包/文本数据包

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…
阅读更多...
Quartz的使用

Quartz的使用

1.准备工作 建立Maven工程 2.引入Quartz的jar包 <dependencies><dependency><groupId>org.quartz-scheduler</groupId><artifactId>quartz</artifactId><version>2.3.0</version></dependency></dependencies>3…
阅读更多...
黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）

黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）

盒子模型 画盒子 目标:使用合适的选择器画盒子 新属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vi…
阅读更多...
单片机串口接收状态机STM32

单片机串口接收状态机STM32

单片机串口接收状态机stm32 前言 项目的芯片stm32转国产&#xff0c;国产芯片的串口DMA接收功能测试不通过&#xff0c;所以要由原本很容易配置的串口空闲中断触发DMA接收数据的方式转为串口逐字节接收的状态机接收数据 两种方式各有优劣&#xff0c;不过我的芯片已经主频跑…
阅读更多...
Android Studio 安装过程

Android Studio 安装过程

以前用 Eclipse 开发&#xff0c;最近尝试 Android Studio 开发&#xff0c;发现 Android Studio 比 Eclipse 速度快多了&#xff0c;下面是安装 Android Studio 过程日志。 Gradle 下载地址&#xff1a;https://services.gradle.org/distributions/ https://developer.andro…
阅读更多...
github.io出现的问题及解决方案

github.io出现的问题及解决方案

1. 你的连接不是专用连接 放假回家后打开自己的博客&#xff0c;发现无法打开博客&#xff0c;一开始以为是调样式时不小心搞坏了&#xff0c;打开别人的githunb.io博客发现都会出问题&#xff0c;并且用手机不连接wifi可以正常打开 解决办法&#xff1a; 方法一&#xff1a; …
阅读更多...
商场应急管理措施和预案|基于springboot+vue的大型商场应急预案管理系统(源码+数据库+文档)

商场应急管理措施和预案|基于springboot+vue的大型商场应急预案管理系统(源码+数据库+文档)

商场应急管理系统 目录 基于springbootvue的大型商场应急预案管理系统 一、前言 二、系统设计 三、系统功能设计 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&…
阅读更多...
【ACM出版，EI稳定检索】2024年人工智能、数字媒体技术与交互设计国际学术会议（ICADI 2024，11月29-12月1日)

【ACM出版，EI稳定检索】2024年人工智能、数字媒体技术与交互设计国际学术会议（ICADI 2024，11月29-12月1日)

2024年人工智能、数字媒体技术与交互设计国际学术会议&#xff08;ICADI 2024) 2024 International Conference on Artificial Intelligence, Digital Media Technology and Interaction Design 官方信息 会议官网&#xff1a;www.icadi.net 2024 International Conference o…
阅读更多...
【Linux】命令行参数 | 环境变量

【Linux】命令行参数 | 环境变量

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 前几天在搞硬件&…
阅读更多...
Stable diffusion 3.5本地运行环境配置记录

Stable diffusion 3.5本地运行环境配置记录

1.环境配置 创建虚环境 conda create -n sd3.5 python3.10Pytorch(>2.0) conda install pytorch2.2.2 torchvision0.17.2 torchaudio2.2.2 pytorch-cuda12.1 -c pytorch -c nvidiaJupyter能使用Anaconda虚环境 conda install ipykernel python -m ipykernel install --user …
阅读更多...
CODESYS可视化星三角降压启动程序控制电气动画图

CODESYS可视化星三角降压启动程序控制电气动画图

#一个用CODESYS可视化做的星三角降压启动程序控制电气动画图# 前言： 关于星三角降压启动控制，作为电气行业入门的必备知识点，涉及到电机本身特性导致的电压，电流（转矩），功率和转速等一系列的关系和变化，以及星型和三角形的绕组方式。本篇我们使用CODESYS结合程序和可视…
阅读更多...
安装fpm，解决*.deb=＞ *.rpm

安装fpm，解决*.deb=＞ *.rpm

要从生成 .deb 包转换为 .rpm 包&#xff0c;可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具&#xff0c;可以将 .deb 包重新打包成 .rpm&#xff0c;也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…
阅读更多...
C#的Event事件示例小白级剖析

C#的Event事件示例小白级剖析

1、委托Delegate 首先说一下delegate委托&#xff0c;委托是将方法作为参数进行传递。 // 定义了一个委托类型public delegate void MyDelegate(int num);// 定义了一个啥也不干的委托实例public MyDelegate m_delegate _ > {};// 定义了一个和委托相同格式的方法public …
阅读更多...
力扣排序350题 两个元组的交集2

力扣排序350题 两个元组的交集2

题目&#xff1a; 给你两个整数数组 nums1 和 nums2 &#xff0c;请你以数组形式返回两 数组的交集。返回结果中每个元素出现的次数&#xff0c;应与元素在两个 数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取 较小值&#xff09;。可以不考虑输出…
阅读更多...
善用Git LFS来降低模型文件对磁盘的占用

善用Git LFS来降低模型文件对磁盘的占用

将讲一个实际的例子&#xff1a;对于模型文件&#xff0c;动辄就是好几个G&#xff0c;而有的仓库更是高达几十G&#xff0c;拉一个仓库到本地&#xff0c;稍不注意直接磁盘拉满都有可能。 比如&#xff1a;meta-llama-3.1-8b-instruct&#xff0c;拉到本地后发现居然占用了60G…
阅读更多...
CentOS 磁盘扩容

CentOS 磁盘扩容

1. 查看要扩展的磁盘 df -h这个就是要扩展的磁盘空间&#xff0c;记住名称&#xff0c;后面会用到 2. 查看所有磁盘信息 fdisk -llsblk可以发现&#xff0c;500G 的硬盘已经安装到服务器但是没被使用&#xff0c;此时需要操作这块硬盘 3. 创建分区 fdisk /dev/vdb根据流程…
阅读更多...
最新文章

Copyright @ 2022~2023