前端开发环境构建 NodeJS + Vue + ElementUI

下载安装并配置nodejs
 

官网下载地址：https://nodejs.org/en/download/

在安装完nodejs后，通过npm下载全局模块默认安装到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm,

在nodejs安装路径下新建文件夹node_cache用来存放下载包的缓存； 即：D:\Program Files\nodejs\node_cache。

 

修改D:\Program Files\nodejs\node_modules\npm\npmrc文件，将默认值改为：prefix=D:\Program Files\nodejs，如果不做这个修改，则npm在运行 npm ls  -g 的时候，仍然以默认的路径来查找已安装的全局模块；

运行npm list -g ，可以列出所有全局模块；

npm install -g yarn

设置镜像

如果公司有搭建私服，使用公司私服镜像  npm set registry http://192.168.1.100:4388

可以安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

npm install webpack -g

安装Vue相关

npm install vue-cli -g

npm install vue-router --save

开发工具下载

 WebStorm:   Thank you for downloading WebStorm!

新建项目引入ElementUI

参考：vue和element-ui使用_大海无量的博客-CSDN博客_vue使用element-ui

Element - The world's most popular Vue UI framework

基于开源项目开发后台管理系统

推荐：GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

常见问题

linux下热更新失败的解决方法 ：执行 echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf&& sudo sysctl -p