首先,自我介绍一下。本人是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
-
说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
-
官方网址:http://npm.taobao.org
-
安装:命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
-
注意:安装完后最好查看其版本号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并未卸载成功,因此需要按照下列步骤进行操作
- 在控制面板输入如下命令,查看文件位置
npm config ls -l
-
找到控制面板中找到userconfig = “C:\Users\Administrator.npmrc”
-
在电脑的相应位置找到.npmrc文件并删除
-
在控制面板中输入如下命令,找到当前安装位置
where vue
如下图:
- 在电脑相应位置找到vue和vue.cmd文件并删除
可以再执行一次卸载vue的操作,输入如下命令:
npm uninstall vue-cli -g
输入命令,查看版本号
vue -V
- 此时可以看到,已经没有版本号,此时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
等