搭建前端环境及前端开发VUE


 

环境篇

1、安装Node.js

  官网下载:https://nodejs.org/en/ (选择LTS那个)

  下载完后,傻瓜式安装(一直下一步)

  配置环境变量,在path中写入安装地址(我的安装路径是C:\Program Files\nodejs\),安装后默认配置好了

  配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache如下图所示

 

所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd命令下执行如下两个命令:

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

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

 

 执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“C:\Program Files\nodejs\node_modules”,如下图:

 

 

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

更改前:

 

 更改后

 

 配置完成

测试下:

在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:

 

 

2、配置淘宝镜像

在nodejs目录下执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

配置失败报错时,

1、删除用户目录下的该文件,如图

2、执行清理命令:npm cache clean --force

 

 重新执行

 配置taobao仓库:npm config set registry https://registry.npm.taobao.org

 

pm config list //查看基本配置 

npm config list -l //查看所有配置

 

npm本地安装与全局安装有什么区别?

npm install grunt // 本地安装,则是将模块下载到当前命令行所在目录。 

npm install -g grunt//全局安装,模块将被下载安装到【全局目录】中;

 

npm如何获取全局安装的默认目录?

npm config get prefix

 

npm如何设置全局安装的默认目录?

npm config set prefix “directory”

 

3、使用 vue-cli + element-ui 快速搭建项目

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板
(本地电脑没有安装 git 的可以进入 https://github.com/ElementUI/element-starter ,点击绿色的 Clone or download 按钮,点击 Download ZIP 下载模板)

② 在项目根目录下使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install

③ 在项目根目录下使用npm run dev跑项目 

 

 

 

 

  

pm config list //查看基本配置 
npm config list -l //查看所有配置

npm本地安装与全局安装有什么区别?

npm install grunt // 本地安装,则是将模块下载到当前命令行所在目录。 
npm install -g grunt//全局安装,模块将被下载安装到【全局目录】中;

npm如何获取全局安装的默认目录?

npm config get prefix

npm如何设置全局安装的默认目录?

npm config set prefix “directory”


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM