使用 VS Code 安装 Vue CLI一步步搭建 Vue 项目的初始环境

  在2019年我就通过vs code开发过多个前后端分离的vue项目。之前一直没总结把开发历程记录下来。最近从零开始重新折腾一遍,也遇到不少坑,记录一下。

一、VS Code 安装及配置

  vscode的安装就太简单了,略过。安装好后,配置一下中文,输入chinese,选第一个简体如图  

二、Node,Npm安装及配置   

      到Node官网下载最新版的安装包,https://npm.taobao.org/mirrors/node/v14.16.0/node-v14.16.0-x64.msi。使用国内镜像会快很多,具体安装步骤就不细说了,Node安装包会自带Npm的。       

  

安装完后,在 cmd中确认一下是否成功,如果查询版本号正常返回说明node跟npm都已安装好        

  这里我们可以更改node.js默认下载依赖的位置。在自己安装的node.js文件夹中新建一个node_cache和node_global文件夹,接下来在cmd分别中输入:

     npm config set prefix "F:\program\nodejs\node_global" 

       npm config set cache "F:\program\nodejs\node_cache"

  更改好了目录,可以去文件夹下面看一下是否创建成功,node_global会及时创建,node_cache是在下载文件之后才会创建的。

  由于npm官方地址下载包一般很慢,继续使用以下cmd命令更换为淘宝镜像源。

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

三、Vue,Vue-cli ,Webpack安装

在vs code终端中执行:npm install -g vue-cli,出现如下界面表示vue安装完成。 

  

如果提示:npm: 无法将“npm ”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。否则表示未安装node.js,请重新安装node.js即可。

  如果设置了npm的全局路径为F:\program\nodejs\node_global,则vue会安装到此位置。此时一定要把该路径配置到环境变量Path中,在我的电脑属性中点开以下标红处编辑。     

 

        如上图所示,因为我已经安装了webpack,所以上图中也有webpack的路径。再输入 npm install vue-cli -g  安装vue-cli,-g表示全局安装。webpack的安装继续在cmd中输入 npm install -D webpack-cli 即可。到此所需要的环境          已经全部安装完成了,下面来创建一个vue项目。 

四、创建Vue 项目

  在vs code中打开一个空的文件夹,然后在“终端”中输入:vue init webpack vue_demo,其中vue_demo可以自行修改。 如果此时出现如下提示:

  无法加载文件 F:\program\nodejs\node_global\node_global\vue.ps1,因为在此系统上禁止运行脚本。解决这个问题只需要在cmd中输入以下命令 set-ExecutionPolicy RemoteSigned 解决:    

     至此,还可能会因为网络问题无法下载vue tample的问题,最近github被墙的很厉害。这里推荐一种免费的范强方式,github 搜索 xx-net,具体使用方法有详细的文档。我最后是通过配置好xx-net,才把vue项目创建成功的,不然               很多包会下载超时导致很多奇怪的问题。          

   最后项目创建成功后的vs code界面是这样的,目录上很多文件不知道啥意思不用紧张,下篇会详细讲解:     

        如果vue文件没有彩色提示,全是黑的,还需要再安装Vetur插件:  

 

 

 

 

 

 

 

 

 

 

 

 

 

顺便把Debugger for Chrome也装一下,后面调试的时候有用。在终端输入:npm run dev  启动起来,如果项目启动了没自动打开浏览器,只要在项目根目录下找到package.json,然后打开该文件,在文件中的script脚本命令的dev行加入–open就可以了,如图所示:

看到下图,到此,全部安装过程完成了。

 

 

 

 

 

 

 

 

 

 

 

 

下一篇继续讲解vue项目的文件结构内容。 

posted @ 2021-03-26 15:21  EastWind520  阅读(88)  评论(0编辑  收藏