30分钟搞定Vue——相关的安装与配置

一.项目预备知识

1.Vue相关的安装与配置

安装下载Node.js

跟着这个博客(NodeJs 的安装及配置环境变量_nodejs配置环境变量-CSDN博客)进行配置即可

简单解释一下npm是什么?

​ npm(node package manager)含义就是node包的管理器.简单来说npm就是一个关于vue的应用商店.

在终端,输入npm --version和node --version来查询node.js是否安装好了,如果能查询出版本号就表示是安装好了

淘宝镜像的配置

上面博客以及有教如何切换淘宝镜像,但是在我这里实现的不是很完美,下面是我另外找到的一个方法

查看当前使用的镜像源
npm config get registry      //记住这个

切换镜像源
切换至淘宝源：npm config set registry=http://registry.npm.taobao.org/        //还有记住这个,就够了
切换至华为源：npm config set registry=https://mirrors.huaweicloud.com/repository/npm/
切换至npm源：npm config set registry=http://registry.npmjs.org
临时使用：npm --registry https://registry.npm.taobao.org install express

脚手架的安装

1.安装vue2脚手架命令

npm install -g vue-cli

2.简写命令

npm i @vue/cli -g

PS:上面两句都是一样的,下面这种是简写,install可以简写成`i`,安装vue cli,`-g`这个参数表示全局安装

3. 如果安装脚手架的时候报错了,可能是因为之前已经安装有了,可以通过删除命令将之前的删除,然后重新安装就好了

卸载Vue2脚手架
npm uninstall vue-cli -g

脚手架安装校验

vue -V //记住这里的-V是大写

如果出现"无法识别"只需要更新一下npm版本即可,不过大家都是官网下载的话,应该都没有这个问题

//更新一下版本
npm install -g npm

如果出现了上图情况那就是安装完成啦!!!

2.项目后端数据部署

打开端口

1. 首先进入https://binaryify.github.io/这个网站或是网易云API接口文档,(如果打不开用这个:https://github.com/Binaryify/NeteaseCloudMusicApi),然会进行下载到自己电脑里面.

2. 最后在该接口文件的打开cmd,输入node app.js运行,出现端口3000即为配置成功!
   

PS:启动完后不要将终端关闭!!!

启动项目

下面讲一下如何启动项目

1. 同样的在cmd进入到该文件项目地址

2. 通过npm run serve来启动项目

3. 稍作等待即可启动成功！
   

   出现这个提示就表示启动成功了，可以把Loacal地址复制一下，在浏览器中打开。

   下面是一些问题总结：

   • 如果发现Vue 报错error:0308010C:digital envelope routines::unsupported，可以看看这篇文章（https://blog.csdn.net/zjjxxh/article/details/127173968），直接看第三个大佬写的方法，我这里也摘录下来了

     package.json增加配置

     "scripts": {
         "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
         "build": "vue-cli-service build"
       },
     

退出项目

退出运行,在命令行界面按ctrl+c就会 弹出退出命令提示