【前端vue】 mac搭建vue环境

1.安装node.js

https://nodejs.org/en/download/

2. 安装淘宝镜像

国内直接使用npm的官方镜像非常慢，所以需要替换成淘宝npm镜像，确保npm命令加载进环境变量，如果没有需要软链接写入环境变量

• 更改npm源
  npm config set registry https://registry.npm.taobao.org
• 检查是否成功
  npm config get registry

https://registry.npm.taobao.org // 输出这个提示则成功

• 安装淘宝cnpm
  sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

如果报错：

npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
npm ERR! A complete log of this run can be found in: /Users/xxxx/.npm/_logs/2024-03-06T14_00_50_892Z-debug-0.log

做如下尝试

• 1. 清空缓存
     npm cache clean --force
• 2. 关闭SSL验证
     npm config set strict-ssl false
• 3. 尝试安装cnpm
     sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装脚手架 vue-cli

cnpm install vue
sudo cnpm install -g vue-cli

4. 创建VUE工程

• 命令行创建

vue init webpack vueDemo
Sorry, name can no longer contain capital letters. // 不能包含大写字母

替换成 sudo vue init webpack vuedemo

• 安装依赖

sudo npm install
sudo cnpm install vue-router vue-resource --save //vue 路由模块vue-router和网络请求模块vue-resource

• 启动

npm run dev

启动项目报错：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

解决办法：

sudo npm uninstall webpack-dev-server //先删除模块
sudo npm install webpack-dev-server@2.9.1//下载重装webpack-dev-serve
npm run dev

参考链接：https://jjxliu306.github.io/ng-form-element/dist/index.html