0
点赞
收藏
分享

微信扫一扫

Vue安装及环境配置

肉肉七七 2022-03-11 阅读 83

一、安装node.js

官网:Download | Node.js

历史版本:Previous Releases | Node.js

或者

下载完毕后,可以安装node,建议不要安装在系统盘(如C:)。

二、设置nodejs prefix(全局)和cache(缓存)路径

1、建议安装的路径不要有中文

2、新建node_global和node_cache两个文件夹

可以在nodejs安装路径下,新建

3、设置缓存文件夹

npm config set cache "E:
ode
ode_cache"

4、设置全局模块存放路径

npm config set prefix "E:
ode
ode_global"

设置成功后,之后用命令npm install XXX -g安装以后模块就在E: ode ode_global里

还可以输入npm list -global命令来查看全局安装目录:

**三、**node.js环境配置

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】,输入的内容根据实际来【D: ode ode_global ode_modules 】

2、【系统变量】下的【Path】添加上node的路径【D: ode_global】

**四、**配置淘宝镜像源

基于 Node.js 安装cnpm(淘宝镜像)

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org),使用淘宝镜像源有两种方式:

安装cnpm:

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

验证方式变成了cnpm config get registrycnpm config list如图所示

直接修改npm的默认配置:

npm config set registry https://registry.npm.taobao.org 

配置后可以根据npm config get registrynpm config list命令查看npm下载源是否配置成功

第二种临时使用:

npm --registry https://registry.npm.taobao.org install cluster

这个代码就是只在安装cluster的使用淘宝镜像下载,每次安装一个模块都用挺长的代码,比较繁琐,所以推荐第一种方式。

五、安装Vue及脚手架

安装vue.js

cnpm install vue -g

或者

npm install vue -g

查看安装的vue信息:npm info vue或者cnpm info vue

查看安装的vue版本npm list vue

安装脚手架vue-cli

cnpm install -g @vue/cli

输入vue ui进入界面 (vue ui打开其网址)

其他补充

安装webpack模板

在命令行中运行命令 npm install webpack -g ,然后等待安装完成。

webpack 4x以上,webpack将命令相关的内容都放到了webpack-cli,
所以还需要安装webpack-cli:npm install --global webpack-cli,
安装成功后可使用webpack -v查看版本号。

顺手安装上vue-router

npm install -g vue-router
举报

相关推荐

0 条评论