不灭的焱

革命尚未成功,同志仍须努力

作者:php-note.com  发布于:2020-06-14 00:08  分类:HTML/CSS/JS  编辑

下载安装包

【官网】当前稳定版本:V14.15.1 LTS,腾讯下载

安装步骤

1、安装node.js到目录:D:\nodejs\nodejs\

2、重新设置本地仓库目录:【这个很重要】

npm config set prefix "D:\nodejs\nodejs\node_global"
npm config set cache "D:\nodejs\nodejs\node_cache"

3、配置淘宝镜像:

npm config set registry=http://registry.npm.taobao.org 

4、配置系统环境:

(1) 增加环境变量 NODE_PATH,内容为:D:\nodejs\nodejs\node_global\node_modules

(2) 对环境变量 Path 增加 D:\nodejs\nodejs\node_global

5、使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了:

$ cnpm install [name]

更多信息可以查阅:https://developer.aliyun.com/mirror/NPM

6、安装Vue相关套件:

cnpm install -g vue            # 或 npm install --global vue
cnpm install -g vue-router

# cnpm install --global vue-cli    # 注意:这个命令安装的是 vue-cli v2.x版本
cnpm install -g @vue/cli           # 安装新版的 vue-cli v3.x
cnpm install -g @vue/cli-init

cnpm install --g webpack
cnpm install --g webpack-cli

特别注意:如果不使用 --global-g 参数,会在当前目录 自动新建子目录 node_modules,并把模块安装到此目录!

升级 vue-cli 2.x 至 vue-cli 3

 

新建Vue项目示例

1. 创建新项目

// 切换到 某个目录
// ......

// 创建一个基于 webpack 模板的新项目
vue init webpack my-project

// 这里需要进行一些配置,默认回车即可

2. 运行项目

cd my-project
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/,输出结果如下所示:

 

 

参考:

[荐]Win10下 安装 node.js、npm 、vue.js