前端环境配置

换电脑,重新搭建开发环境,整理下操作过程

1. nodejs

安装nvm 

下载地址: https://github.com/coreybutler/nvm-windows/releases

下载安装版nvm-setup.zip,安装在C:\dev,安装时注意添加到path

环境变量配置:

NVM_HOME C:\dev\nvm
NVM_SYMLINK C:\dev\nodejs

path     %NVM_HOME%;%NVM_SYMLINK%;C:\dev\nvm\npm\node_global

使用nvm

nvm list
nvm install latest
nvm install 8.9.4
nvm use 8.9.4

配置路径及使用淘宝镜像源

安装成功后,找到c:\dev\nvm\settings.txt,修改如下:
root: C:\dev\nvm
path: C:\dev\nodejs
arch: 64 
proxy: none 
node_mirror: http://npm.taobao.org/mirrors/node/ 

npm_mirror: https://npm.taobao.org/mirrors/npm/

找到C:\Users\User\.npmrc文件

添加配置  registry=https://registry.npm.taobao.org

不用nvm时配置方法:

path C:\nodejs\node_modules\node_global
NODE_PATH C:\nodejs\node_modules\node_global\node_modules
配置npm全局安装及缓存路径
npm config set prefix "C:\nodejs\node_modules\node_global"
npm config set cache"C:\nodejs\node_modules\node_cache"

配置全局与缓存包路径

npm config set prefix "C:\dev\nvm\npm\node_global"

npm config set cache "C:\dev\nvm\npm\node_cache"

2. webstorm

licence server: http://idea.imsxm.com

配置nodejs路径:file-settings-Node.js and NPM 

忽略node_modules目录

3.less配置

全局安装: npm install -g less

webstorm设置:file-settings-file watchers-tools-add

设置输出文件目录:

    output paths to refresh: 

    当前目录:$FileNameWithoutExtension$.css

    less目录与css目录平级:$FileParentDir$/css/$FileNameWithoutExtension$.css

4.sass配置

安装ruby

安装sass gem install sass

webstorm及输出目录设置与less一样

5.vue-cli

npm install -g vue-cli

vue -V

vue init webpack test-project

你可能感兴趣的:(env)