一、安装nodeJS,点我

1.1 安装

进入node官网,下载64位安装包,一直点击下一步(勾上Add to Path),按默认安装

1.2 验证是否安装成功

执行下面命令即可,出现版本即为安装成功,未成功的查看Path是否正确

node -v

新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西

1.3 环境配置

环境配置,主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径。

之所以要配置,是因为在执行类似安装语句时:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思),会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间

例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\NodeJS】下创建两个文件夹【node_global】及【node_cache】如下图:

nvm安装node后yarn失效_环境配置


创建完两个空文件夹之后,打开cmd命令窗口,输入

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

接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:\NodeJS\node_global\node_modules】,

nvm安装node后yarn失效_nvm安装node后yarn失效_02


将【用户变量】下的【Path】修改为【D:\NodeJS\node_global】

nvm安装node后yarn失效_环境变量_03

二、安装cnpm

2.1 安装淘宝镜像
淘宝镜像官网 ,执行下面命令即可

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

上一步配置好就不会把cnpm装到C盘去了

nvm安装node后yarn失效_环境配置_04


2.2 验证是否安装成功

执行下面命令即可,出现版本即为安装成功,未成功的查看Path是否正确

cnpm -v

nvm安装node后yarn失效_nvm安装node后yarn失效_05


安装完之后就可以用cnpm代替npm ,装包速度比较快哦

这里遇到一个坑:
cnpm - 解决 " cnpm : 无法加载文件 C:\Users\用户名\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本。有关详细信息 。。。 "

  • 第一步在win10 系统中搜索框 输入 Windos PowerShell 选择 管理员身份运行
  • 第二步打开了powershell命令行之后,输入
set-ExecutionPolicy RemoteSigned

nvm安装node后yarn失效_环境变量_06


然后更改权限为A,最后通过 get-ExecutionPolicy 查看当前的状态,完成。

nvm安装node后yarn失效_用户名_07

三、安装vue-cli脚手架构建工具

3.1 确认是否曾经安装过

vue -V

如果安装过,执行下面命令卸载

npm uninstall vue-cli -g

执行下面命令重新安装

cnpm install -g @vue/cli

如需指定版本安装

安装3.0以下执行下面命令

npm install -g vue-cli@版本号

安装3.0以上执行下面命令

npm install -g @vue-cli@版本号
四、创建项目

4.1 执行命令 vue create 项目名称 ,创建项目

vue create  my-vue-project

默认设置选第一个按回车直接创建

nvm安装node后yarn失效_nvm安装node后yarn失效_08

手动设置选第二个如下,按空格选择你所需要的东西,回车确定(建议取消Linter /Formatter,不然报错报到你怀疑人生)

nvm安装node后yarn失效_环境变量_09


是否使用路由是否history 模式?(history 模式需要后端支持,所以选No)

nvm安装node后yarn失效_环境配置_10


把配置放在哪里(package.json)

nvm安装node后yarn失效_用户名_11


是否将你现在的配置设置为之后所有创建的项目(No)

nvm安装node后yarn失效_环境变量_12


创建成功

nvm安装node后yarn失效_环境变量_13


4.2 按照提示运行项目

cd my-project
cnpm run serve

nvm安装node后yarn失效_环境变量_14


所有命令推荐使用cmd执行

进入e盘

e:

进入对应文件夹

cd e:/vue-cli-study