第一篇 手记vue入门篇——关于毕业设计的一些小问题

首先，自我介绍一下。本人是2021届毕业生目前在准备毕业设计中，但由于是一个光说不做的人，所以即将毕业了还毫无建树。这是我的第一篇博客，其实更多是对自己慢慢转变的一种记录。
之后，会根据毕业设计中遇到的各种问题进行记录，同时也是会慢慢学习更多的东西，对自己成长的记录。

前端界面：vue脚手架安装，什么是vue脚手架？

• vue脚手架：作用可以理解为自动帮我们构建项目的工具，是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。
• 是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
• 安装前，需要先安装node.js，在node环境中安装

一、如何安装node.js？

• 1)登陆官网https://nodejs.org/en/直接下载
  下载缓慢后续更新
• 2）下载完成后。
• 3）检测安装
  node.js / npm
  

二、安装vue脚手架

• 全局安装vue-cil，也就是所谓的脚手架

  1）用npm安装（国际开源库生态系统）

npm install -g @vue/cli
切记不要用下面方式安装，以下是安装2.0版本，后续卸载很麻烦
npm install -g vue-cli

 什么是npm？
 npm其实是Node.js的包管理工具（package manager），

2）vue -V记住这里的-V是大写字母V，出现版本号说明安装成功[


终于安装成功，输入命令启动

vue ui 

结束

以下是安装期间遇到的问题，主要是在安装错2.0.0后，不能启动的一系列操作

三、改变原有的环境变量

1、首先配置npm的全局模块的存放路径、cache的路径，此处我放在：D:\Program Files\nodejs

• 前提需要 config模块包使用
  安装npm install config
• 为什么要安装？
  代码中使用
  config安装成功后，可以在项目中创建几种环境的配置文件。
  test 测试环境
  product 生产环境
  development 开发环境

输入如下命令：

npm install config
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"

2、在系统环境变量添加NODE_PATH,输入路径为：

D:\Program Files\nodejs\node_global

操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径，确定即可。

3、在命令行输入以下命令安装express（注：“-g”表示安装到global目录下，就是上面设置的node_global中）

npm install express -g

可以看到node_global/node_modules下有express了，如图：

4、在命令行输入

node

进入编辑模式，输入以下代码检测是否能正常加载模块：

require(‘express’)

如果成功，如上图显示；如果出错，检测下上面配置的NODE_PATH是否配置或者配置正确。这边配置比较慢。

四、*选安装cnpm

1. 说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”

2. 官方网址：http://npm.taobao.org

3. 安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

4. 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

五、 启动GUI面板

在命令行输入vue ui无法调出面板，输入vue -V查看vue ui版本
显示为2.9.6版本，需要3.0.0版本才能启动。
解决方法：
卸载原来的版本：

npm uninstall vue/cli -g

卸载后再重新安装一个：

npm i -g @vue/cli
npm install -g @vue/cli

失败

不断卸载重下无济于事，后来参考
https://blog.csdn.net/gyueh/article/details/109502388
终于解决

六、解决方法，vue脚手架2.96无法卸载及新脚手架无法安装的解决方案

全局卸载cli脚手架,输入如下命令

npm uninstall vue-cli -g

输入命令，查看版本号

vue -V

注意：
此时可以看到相应的版本号，此时cli并未卸载成功，因此需要按照下列步骤进行操作

1. 在控制面板输入如下命令,查看文件位置

npm config ls -l

2. 找到控制面板中找到userconfig = “C:\Users\Administrator.npmrc”
   

3. 在电脑的相应位置找到.npmrc文件并删除

4. 在控制面板中输入如下命令,找到当前安装位置

where vue

如下图：

5. 在电脑相应位置找到vue和vue.cmd文件并删除

可以再执行一次卸载vue的操作，输入如下命令：

npm uninstall vue-cli -g

输入命令，查看版本号

vue -V

6. 此时可以看到，已经没有版本号，此时cli已经卸载成功
   安装新版的cli脚手架：

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

————————————————
参考链接：
https://blog.csdn.net/Natural_Ant/article/details/89874277
https://www.liaoxuefeng.com/wiki/1022910821149312/1023025597810528
https://blog.csdn.net/gyueh/article/details/109502388

等