安装vue+element开发环境过程记录(2021-06-05)

安装vue+element开发环境过程记录

使用vue ui初始化vue工程并安装elementui插件

查看是否安装了vue

命令：vue -V
注意V大写，若提示 command not found 则进行下一步；若提示版本号为：2.9.6 ，我用vue ui网页管理界面创建工程则需要卸载这一版本。
注意：用npm install vue-cli -g 命令，安装的是2.9.6版本，最新的版本安装命令是“npm install -g @vue/cli”；另3.0以上版本集成了图形界面vue ui启动
卸载2.9.6等旧版本的命令：sudo npm uninstall vue-cli -g
1:Mac安装Vue环境

安装vue-cli

新版vue脚手架安装命令：sudo npm install -g @vue/cli
前面加sudo 是获取系统的权限，之后需要输入密码，不加sudo可能因为权限的问题安装失败。

如果安装vue出现一些警告和错误，别管他，清除一下缓存就行
清除缓存的命令：npm cache clean --force
清除缓存后，用vue -V 命令查看版本

如果vue ui创建vue工程启动失败

npm run dev报错webpack-dev-serve
原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
sudo npm uninstall webpack-dev-server
sudo npm install webpack-dev-server@2.9.1
重新安装依赖模块
rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

npm run serve
启动项目成功
2: vue项目初始化时npm run dev报错webpack-dev-server解决方法
3: node 重新安装依赖模块（删除node_modules重新安装）

npm run serve成功但是vue ui仍报错

Vue ui中项目管理器中清除该项目重新导入即可

在vue ui中安装elementui插件

选择插件后 需要选择全部导入还是按需导入 按需导入后需要在@/plugins/element.js中增加
import ‘element-ui/lib/theme-chalk/index.css’
安装element 后一定点击完成安装 插件安装才会生效

补充

Vue ui创建好初始化项目 启动失败 但是在终端 npm run serve启动正常
通过npm update -g @vue/cli升级vue/cli
升级后可以重新导入之前的项目再启动

查看node版本： node -v
查看npm的本地仓库： npm list –global

配置淘宝 NPM 镜像
国内直接使用 npm 的官方镜像非常慢，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
输入命令：npm config set registry=https://registry.npm.taobao.org
输入命令：npm config list 显示所有配置信息，我们关注一个配置文件
检查一下镜像站
输入命令：npm config get registry

获取vue信息（此时并非安装）
输入命令：npm info vue

安装更新模块，命令：npm install npm –g
npm install代表安装更新， 第二个npm是指的模块名字
-g：代表安装到global目录下