加入QQ群
QQ联系我
微信公众号
在线联系站长
一、VSCode的安装
VSCode安装配置使用教程-软技收集（这个是VSCode安装教程）
①安装中文插件
②重启VSCode
③切换成功
二、Node.js的安装
①下载node.js安装包
②安装node.js
1.双击 node-v20.18.1-x64.msi 安装包，点击Next
2.勾选同意xxxxx，点击Next
3.选择安装路径，点击Next
4.这里我选择C盘
5.继续点击下一步Next
6.继续点击下一步Next
7.点击安装
8.点击完成
9.使用cmd查看是否安装成功
三、全局安装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/cliyarn global add @vue/cli2.执行之前记得更换npm源，不然下载不了
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 –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.安装成功的例示
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 install2.安装成功的例示
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 项目
2.将文件夹解压后拖到VSCode打开
3.打开VSCode终端
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 devnpm 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.
2.在浏览器打开网址
App running at:
Local: http://localhost:8080/ - Network: http://10.0.4.2:8080/
例如这个一般是是：
http://localhost:8080/
3.管理密码
用户名： admin
密码： 123456
暂无评论内容