vue开发环境安装-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44605704/article/details/103258633

一、安装nodejs和npm

安装步骤：一直next就好了，安装过程中根据自己的需要修改安装目录，也可不修改、使用默认目录。

解疑答惑：1、npm是什么？
npm是个前端的依赖包管理工具，类似于maven。
npm是随同nodejs一起安装的包管理工具，新版的nodejs已经集成了npm，所以之前npm也一并安装好了。

踩坑记录：安装nodejs时使用的是安装教程中的4.4.3版本，版本过低导致第3步中执行cnpm install vue-cli -g命令报错，如下图。
在这里插入图片描述 解决方案：不要使用安装教程中的4.4.3版本的安装包，去官网下载最新的安装包。

安装成功：安装完之后就安好了nodejs和npm
查看node版本：node --version（如下图所示）
查看npm版本：npm -v（如下图所示）

在这里插入图片描述

二、使用淘宝 NPM 镜像

解答疑惑：为什么要用淘宝镜像？
淘宝 npm镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步，国内直接使用 npm 的官方镜像是非常慢的，所以推荐使用淘宝 NPM 镜像。

教程：使用淘宝 NPM 镜像
即执行以下命令：

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

执行完之后可使用以下命令查看cnpm版本：

cnpm -v

在这里插入图片描述

三、安装vue脚手架vue-cli

参考文档：vue-cli的安装及版本查看更新
执行命令：（注意这里的命令使用的是cnpm而不是npm是因为第二步配置了淘宝npm镜像）

cnpm install vue-cli -g
或者
cnpm install @vue/cli -g
两者的区别是，第一个命令安装的是2.9.6版本即2.x的最新版本，第二个命令安装的是3.0之后的最新版本，
可以根据自己的需要安装。

在这里插入图片描述
查看vue版本命令：vue -V
卸载vue命令：npm uninstall vue-cli -g

四、开发工具VSCode安装

官方下载地址：Download Visual Studio Code - Mac, Linux, Windows

安装步骤：一直next就好了，安装过程中根据自己的需要修改安装目录，也可不修改、使用默认目录。

五、其他工具安装

~~1、安装webpack，它是打包js的工具，安装命令：cnpm install -g webpack~~

六、创建vue项目

step1、创建项目，执行命令：vue create testProject20191127testProject20191127为项目名
踩坑记录：
A、执行上面命令之后报错，报错信息如下：

vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚
本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Poli 
cies。

解决方案：参考博文vue : 无法加载文件。。。
B、解决完上面的报错之后继续执行vue create testProject20191127命令，又报错了，报错信息如下：

Invalid project name: "testProject20191127"
Warning: name can no longer contain capital letters

OK，这个错误很简单，项目名称不能包含大写字母。

step2、执行命令vue create testproject20191127，和上面的命令没差，项目名没有大写字母了而已。
执行完之后出现下图选项：
在这里插入图片描述
即使用键盘的上下箭头键选择一个预设，选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了，这里我选的是default。