1-电商后台管理系统实战(环境部署)

热帖

所有用到的资料在文章末尾获取!!!

一、VSCode的安装

VSCode安装配置使用教程-软技收集(这个是VSCode安装教程)

PixPin 2024 12 05 20 23 29

①安装中文插件

PixPin 2024 12 05 19 22 15

②重启VSCode

PixPin 2024 12 05 19 29 17

③切换成功

PixPin 2024 12 05 19 30 20

二、Node.js的安装

建议安装node.js20版本

①下载node.js安装包

PixPin 2024 12 05 22 55 20

PixPin 2024 12 05 19 38 48

②安装node.js

1.双击 node-v20.18.1-x64.msi 安装包,点击Next

PixPin 2024 12 05 19 40 15

2.勾选同意xxxxx,点击Next

PixPin 2024 12 05 19 43 45

3.选择安装路径,点击Next

PixPin 2024 12 05 19 54 04

4.这里我选择C盘

PixPin 2024 12 05 20 02 37

5.继续点击下一步Next

PixPin 2024 12 05 20 03 20

6.继续点击下一步Next

image

7.点击安装

PixPin 2024 12 05 20 06 09

8.点击完成

PixPin 2024 12 05 20 09 39

9.使用cmd查看是否安装成功

PixPin 2024 12 05 20 14 34

PixPin 2024 12 05 20 16 31

三、全局安装vue-Cli脚手架

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

1.可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
yarn global add @vue/cli

2.执行之前记得更换npm源,不然下载不了

推荐使用标红的!!!!更换后如果报错就多试几次或者使用下面方法

image

npm切换成淘宝源或者其他私有源,或者官方源,也是常有的操作,有时需要永久切换,有时需要临时切换,下面我们来操作一波
基本语法:

查看当前npm仓库的源 npm config get registry

永久切换 npm config set registry https://xxxxxxxx

临时切换 npm –registry https://xxxxxxx install express

使用 cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org

首先查看当前npm仓库的源 npm config get registry
永久切换官方的源 npm config set registry https://registry.npmjs.org/
永久切换成淘宝源

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

永久切换成阿里源

npm config set registry https://registry.npmmirror.com
临时切换官方的源 npm –registry https://registry.npmjs.org/ install express
临时切换成淘宝源 npm –registry https://registry.npm.taobao.org install express

[超详细]npm更换下载源
一. 临时换源
有时只需要临时换源进行插件的下载,可以采用如下方式

npm –registry https://registry.npmmirror.com install [依赖的名称]
二.持久换源
1.下载cnpm方式
cnpm是由淘宝团队开发的,‌作为一个完整的npmjs.org镜像,‌用户可以用它来替代官方的npm(‌Node Package Manager)‌,‌且它是只读的。‌

使用阿里定制的 cnpm 命令行工具代替默认的 npm

npm install -g cnpm –registry=https://registry.npm.taobao.org
检测cnpm版本,如果安装成功会显示cnpm的基本信息

cnpm -v
安装完成后,以后安装插件使用 cnpm install 即可

2.使用set registry命令方式
查看当前源

npm config get registry
更换npm源为国内淘宝镜像

npm config set registry https://registry.npmmirror.com/
如果要还原成官方默认源

npm config set registry https://registry.npmjs.org/
3.使用nrm管理npm源
nrm 是一个 npm 源管理器,允许你快速地在不同的 npm 源间切换

安装nrm源管理工具

npm install -g nrm
查看nrm配置

nrm里默认有一些镜像源的配置

带 * 即为当前使用的源地址

nrm ls

切换不同镜像(例如切换淘宝镜像)

nrm use taobao
测试镜像速度

nrm test taobao
使用nrm添加镜像地址

nrm add [name] [url]

[name]替换成镜像名称

[url]替换成镜像地址
删除nrm镜像

nrm del [name]

[name]替换成镜像名称


3.可以用这个命令来检查其版本是否正确:

vue –version ( vue –v )
或者vue -V

也可以,注意:-V 是大写

输入检测vue版本号命令后出现版本号即安装成功!

如需升级全局的 Vue CLI 包,请运行:

npm update -g @vue/cli

或者

yarn global upgrade –latest @vue/cli
安装vue脚手架后,可用命令 vue create 项目名 创建vue项目

创建完成后就可以开始编写vue项目了!

4.安装成功的例示

PixPin 2024 12 05 21 13 40

PS C:\Users\Administrator\Desktop\shop-admin> npm install -g @vue/cli
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated apollo-datasource@3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3,
which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-errors@3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package’s functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-plugin-base@3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package’s functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-types@3.8.0: The apollo-server-types package is part of Apollo Server v2 and
v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package’s
functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-express@3.13.0: The apollo-server-express package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively). This package’s
functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated apollo-reporting-protobuf@3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package’s functionality is now found in the @apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated apollo-server-env@4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3,
which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package’s functionality is now found in the @apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated subscriptions-transport-ws@0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm warn deprecated apollo-server-core@3.13.0: The apollo-server-core package is part of Apollo Server v2 and v3, which are now end-of-life (as of October 22nd 2023 and October 22nd 2024, respectively).
This package’s functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

added 829 packages in 1m

75 packages are looking for funding
run npm fund for details
PS C:\Users\Administrator\Desktop\shop-admin>

四、项目依赖安装

1.本地依赖安装

确认在你的项目目录中是否有 node_modules 文件夹,并且里面是否包含 @vue/cli-service。你可以通过以下命令来强制重新安装所有的依赖项,这可能会修复任何可能存在的安装问题:

npm install

2.安装成功的例示

PixPin 2024 12 05 21 22 49

PixPin 2024 12 05 21 23 38

PS C:\Users\Administrator\Desktop\shop-admin> npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is
much more comprehensive and powerful.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @humanwhocodes/config-array@0.5.0: Use @eslint/config-array instead
npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated consolidate@0.15.1: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@1.2.1: Use @eslint/object-schema instead
npm warn deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm warn deprecated webpack-chain@6.5.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated eslint@7.32.0: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 938 packages in 2m

119 packages are looking for funding
run npm fund for details
PS C:\Users\Administrator\Desktop\shop-admin>

五、代码内部的部署

1.下载 shop-admin 项目

PixPin 2024 12 05 22 55 20

2.将文件夹解压后拖到VSCode打开

PixPin 2024 12 05 20 35 50

3.打开VSCode终端

PixPin 2024 12 05 20 39 20

这里输入启动项目命令‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序,原因是我们的项目所需要的 Vue CLI 或者 Vue CLI 服务没有下载安装

PixPin 2024 12 05 20 41 50

4.下载安装 Vue CLI 或者 Vue CLI 服务

遇到 'vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件 的错误信息通常意味着你的环境中缺少 Vue CLI 或者 Vue CLI 服务未正确安装。

要解决这个问题,你可以按照以下步骤操作:

安装 Vue CLI

确保你已经全局安装了 Vue CLI。可以通过下面的命令来安装它:

npm install -g @vue/cli

六、启动项目

1.输入启动命令

在Vue项目中,常见的启动命令有:

npm run dev

npm run dev

这个命令通常用于启动开发服务器,实现代码的热重载。(建议使用)

npm run serve

npm run serve

与npm run dev类似,也是用于启动开发服务器。

npm start

npm start

在一些项目中,start脚本也被用来启动开发服务器。

2.打开浏览器查看

1.输入启动命令后会显示

PS C:\Users\Administrator\Desktop\shop-admin> npm run serve

shop-admin@0.1.0 serve
vue-cli-service serve

INFO Starting development server…

DONE Compiled successfully in 23012ms 21:28:49

App running at:

  • Local: http://localhost:8080/
  • Network: http://10.0.4.2:8080/ Note that the development build is not optimized.
    To create a production build, run npm run build.

PixPin 2024 12 05 21 30 49

PixPin 2024 12 05 21 28 40

2.在浏览器打开网址

App running at:

  • Local: http://localhost:8080/
  • Network: http://10.0.4.2:8080/

例如这个一般是是:

http://localhost:8080/

启动成功!!!!

PixPin 2024 12 05 22 07 40

3.管理密码

用户名: admin

密码: 123456

PixPin 2024 12 05 22 10 26

温馨提示:本文最后更新于2024年12月17日 20:19:30,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长
本文资源整理自网络,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作!
如果觉得本文有用就按Ctrl+D收藏,方便以后随时翻看,免得想看时又找不着 或 发现更多
十二 5

本站历史上的今天

    "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~"
© 版权声明
THE END
喜欢就支持一下软技收集吧
点赞11赞赏 分享
相关推荐
评论区 抢沙发

    快来评论吧!