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

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:55   3068   0

下载安装并配置nodejs

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

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

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

运行 npm config set cache "D:\Program Files\nodejs\node_cache" 设置缓存文件夹。

运行npm config set prefix "D:\Program Files\nodejs"设置全局模块存放路径,nodejs会自动寻找该路径下的node_modules文件夹为实际存放全局模块的路径,这也是为啥叫prefix不叫global的原因,以后安装的全局模块都会被放到D:\Program Files\nodejs\node_modules下,跟npm模块在一个文件夹中。

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

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

设置镜像

如果公司有搭建私服,使用公司私服镜像 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: http://www.jetbrains.com/webstorm/download/download-thanks.html

新建项目引入ElementUI

参考:https://blog.csdn.net/qq_37164847/article/details/80939741

https://element.eleme.cn/#/zh-CN/component/quickstart

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

推荐:https://github.com/PanJiaChen/vue-element-admin

常见问题

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP