• 前端配置环境和可能出现的问题


    一、node

    1.node官网(稳定版):Node.js (nodejs.org)下载安装, 运行检查:node -v npm -v 命令

    2.在node.js安装目录下(与node_modules同级)新建两个文件夹 node_global 和 node_cache

    3.在命令行窗口下执行如下两个命令(注意路径,当前安装在c盘):

    npm config set prefix "C:\Program Files\nodejs\node_global"

    npm config set cache "C:\Program Files\nodejs\node_cache"

    4.控制面板\系统和安全\系统 :高级系统设置 --环境变量 ->

    系统变量中新建一个变量名为 “NODE_PATH”,值为“C:\ProgramFiles\nodejs\node_modules”,

    编辑用户变量里的Path,将相应npm的路径改为:C:\Program Files\nodejs\node_global

    环境变量:包含系统变量和用户变量,他首先是一个变量,它的值是一个路径,它的作用是简化终端内打开应用程序的操作。因为在终端内输入一串字符它会在当前目录查找该应用,若是没有找到它会到环境变量中查找,若还没有找到则报错,如若找到则打开应用。

    5.提高npm下载速度:
    cnpm替换npm:npm install -g cnpm --registry=https://registry.npm.taobao.org
    或直接使用:npm install --registry=https://registry.npm.taobao.org

    6.测试:cnpm安装vue脚手架:cnpm install -g @vue/cli

    7.再检查是否安装cnpm

    npm list --depth=0 -global

    8.如果显示 :执行npm install express

    无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确 ,然后再试一次。执行下列代码

    或者:no such file or directory, open 'C:\Program Files\nodejs\node_global\node_modules\cnpm\package.json

    9.再检查是否安装cnpm

    npm list --depth=0 -global

    Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_global"

    可以在记事本中写npmrc

    prefix=D:\nodejs\node_global

    cache=D:\nodejs\node_cache

    二、npm

    npm i -g npm

    三、yarn

    1、npm install -g yarn

    2、yarn --version(显示版本号则安装成功)

    3、如果有无法加载情况,参考文档

    https://blog.csdn.net/qq_30376375/article/details/116139870

    四、vue

    1、npm install vue

    2、创建新的vue环境包_Nikki_u的博客-CSDN博客

    3、如果出现报错

    无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次 必

    解决技巧:没有安装vue/cli

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

    4、当创建vue项目时出现一下提示

    vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.

    You may want to run the following to upgrade to Vue CLI 3: 

    依次运行以下代码

    npm uninstall -g vue-cli

    npm install -g @vue/cli

    五、webpack

    安装步骤

    Webpack安装教程_醋黄瓜的博客-CSDN博客_webpack

    参考文档

    前端基础开发环境安装与配置 - 居老师的狗子 - 博客园

    我的csdn

    使用yarn进行webpack配置及简单使用_Nikki_u的博客-CSDN博客_yarn 安装webpack

    六、node-sass问题

    1、node版本切换到14.17.3版本

    2、node-sass切换到淘宝源npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

    3、使用npm i或者yarn命令进行装包

    4、开始运行即可

    参考文档链接

     

  • 相关阅读:
    Linux-实操篇8-shell脚本编写
    Chapter11 : Deep Learning in Structure-Based Drug Design
    Windows 10 资源管理器使用深色主题
    SORA 到底是什么?如何用bitget wallet购买?
    java.util.Properties类常用的方法
    python和pycharm的安装教程--保姆级
    SaaS服务平台软件是什么?
    order by数据过多引起的cpu飙升
    Spring源码解析之八finishBeanFactoryInitialization方法即初始化单例bean
    测试平台前端部署
  • 原文地址:https://blog.csdn.net/Nikki_u/article/details/125411667