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

news2024/11/8 12:42:10

前言

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

步骤一:下载并安装 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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

canal1.1.7使用canal-adapter进行mysql同步数据

重要的事情说前面&#xff0c;canal1.1.8需要jdk11以上&#xff0c;大家自行选择&#xff0c;我这由于项目原因只能使用1.1.7兼容版的 文章参考地址&#xff1a; canal 使用详解_canal使用-CSDN博客 使用canal.deployer-1.1.7和canal.adapter-1.1.7实现mysql数据同步_mysql更…

403 Request Entity Too Lager(请求体太大啦)

昨天收到 QA 的生产报障&#xff0c;说是测试环境的附件上传功能报了 403 的错误&#xff0c;错误信息&#xff1a;403 Request Entity Too Lager。我尝试复现问题&#xff0c;发现传个几兆的文件都费劲啊&#xff0c;一传一个失败。不用说&#xff0c;项目用到 ng 代理&#x…

【VScode】如何在VSCode中配置Python开发环境:从零开始的完整指南

文章目录 前言软件准备软件安装1. 安装Python2. 检查Python是否安装成功3. 安装第三方包4. 安装VSCode 配置VSCode1. 安装Python插件2. 创建项目&#xff0c;配置工作区域3. 编写Python文件4. 配置Python编译设置5. 使用代码格式化工具yapf 更多文章结尾 前言 在当今的编程世界…

SQL,力扣题目571, 给定数字的频率查询中位数

一、力扣链接 LeetCode_571 二、题目描述 Numbers 表&#xff1a; ------------------- | Column Name | Type | ------------------- | num | int | | frequency | int | ------------------- num 是这张表的主键(具有唯一值的列)。 这张表的每一行表示某个数…

LLMs之PDF:zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略

LLMs之PDF&#xff1a;zeroX(一款PDF到Markdown 的视觉模型转换工具)的简介、安装和使用方法、案例应用之详细攻略 目录 zeroX的简介 1、支持的文件类型 zeroX的安装和使用方法 T1、Node.js 版本&#xff1a; 安装 使用方法 使用文件 URL&#xff1a; 使用本地路径&…

containerd配置私有仓库registry

机器ip端口regtisry192.168.0.725000k8s-*-------k8s集群 1、镜像上传 rootadmin:~# docker push 192.168.0.72:5000/nginx:1.26.1-alpine The push refers to repository [192.168.0.72:5000/nginx] 6961f0b8531c: Pushed 3112cd521249: Pushed d3f50ce9b5b5: Pushed 9efaf2eb…

js例轮播图定时器版

要求 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width, ini…

PostgreSQL 学习笔记:PostgreSQL 主从复制

PostgreSQL 笔记&#xff1a;PostgreSQL 主从复制 博客地址&#xff1a;TMDOG 的博客 在现代应用程序中&#xff0c;数据库的高可用性和扩展性是至关重要的。PostgreSQL 提供了主从复制功能&#xff0c;可以在多个数据库实例之间复制数据&#xff0c;以实现冗余和负载均衡。本…

【系统集成项目管理工程师教程】第5章 软件工程

软件工程是一门研究用工程化方法构建和维护有效、实用和高质量软件的学科&#xff0c;涵盖软件需求、设计、实现、测试、部署交付、质量管理和过程能力成熟度等方面&#xff0c;旨在提高软件生产率、质量并降低成本&#xff0c;确保软件项目的成功开发与维护。 5.1软件工程定义…

Java项目实战II基于Spring Boot的便利店信息管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在快节奏的…

vscode Comment Translate 反应慢 加载中...

Comment Translate 版本&#xff1a;v2.3.3 你是不是疑惑切换了 Bing 源也无法使用还是加载中… 那么可能你切换Bing后没重启vscode 下面是切换成功后的插件日志&#xff0c;一定要重启vscode&#xff0c;只是禁用和启用插件不行的&#xff0c;另外google是没用的&#xff0c;用…

网站架构知识之Ansible(day020)

1.Ansible架构 Inventory 主机清单:被管理主机的ip列表,分类 ad-hoc模式: 命令行批量管理(使用ans模块),临时任务 playbook 剧本模式: 类似于把操作写出脚本,可以重复运行这个脚本 2.修改配置 配置文件&#xff1a;/etc/ansible/ansible.cfg 修改配置文件关闭主机Host_key…

智启未来,趣享生活 德国卡赫举办系列新品首发活动

全球最大的清洁设备和清洁解决方案提供商德国卡赫&#xff0c;于11月6日在第七届进博会新品发布平台举办主题为“智启未来&#xff0c;趣享生活”的新品发布会&#xff0c;揭开全球首发新品可折叠式手持清洗机KHB Air以及亚洲首发新品商用清洁机器人KIRA CV 50的神秘面纱。作为…

xlsx.js 读取excel文件

需求&#xff1a;读取一个excel文件。 一、 使用antd的Upload组件的 【customRequest】方法。 互斥。此方法跟【onChange】方法互斥&#xff0c;即&#xff1a;不可同时出现。调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次&#xff08;读取中&#xff…

WPF中的依赖属性

1.创建项目后下载两个NuGet程序包 2.创建一个MyButton类继承Button MyButton类如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Contro…

Java执行顺序大揭秘:静态块、非静态块和构造方法谁先谁后?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello大家好,我是小米!今天咱们来聊聊Java中的一个小而重要的知识点——初始化块。可能有的小伙伴一听这名字就觉得有点头大,这东西到底是干嘛的?为…

【Linux系列】字符串操作的艺术:删除前缀的 Shell 脚本技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nginx 部署2个相同的vue

起因&#xff1a; 最近遇到一个问题&#xff0c;在前端用nginx 部署 vue&#xff0c; 发现如果前端有改动&#xff0c;如果不适用热更新&#xff0c;而是直接复制项目过去&#xff0c;会404 因此想到用nginx 负载两套相同vue项目&#xff0c;然后一个个复制vue项目就可以了。…

Maven(六)mvn 命令将 jar 包推送到 远程/本地仓库

目录 一、deploy - 推送到远程仓库1.1 命令语法&#xff1a;1.2 执行结果&#xff1a;1.3 可能遇到的问题问题1&#xff1a;with status code 401问题2&#xff1a;with status code 405问题3&#xff1a;Cannot deploy artifact from the local repository 二、install - 推送…

WEB 应用防护系统的部署方式

在当今数字化飞速发展的时代&#xff0c;WEB 应用面临着来自各方的安全威胁&#xff0c;而 WEB 应用防护系统&#xff08;WAF&#xff09;的部署成为了保障网络安全至关重要的环节。以下将详细介绍几种常见的 WEB 应用防护系统部署方式。根据 WAF 接入网络后的工作方式&#xf…