欢迎光临
我的个人博客网站

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

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

  • VS Code 安装及配置

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

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

  • Node,Npm安装及配置   

      到Node官网下载最新版的安装包,https://npm.taobao.org/mirrors/node/v14.16.0/node-v14.16.0-x64.msi。

  使用国内镜像会快很多,具体安装步骤就不细说了,Node安装包会自带Npm的。

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

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

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

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

  npm config set prefix “F:programnodejsnode_global” 

    npm config set cache “F:programnodejsnode_cache”

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

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

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

  • Vue,Webpack安装

 在vs code终端中执行:npm install -g vue-cli,出现如下界面表示vue安装完成。  使用 VS Code 安装 Vue CLI一步步搭建 Vue 项目的初始环境

 

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

  否则表示未安装node.js,请重新安装node.js即可。

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

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

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

        如上图所示,因为我已经安装了webpack,所以上图中也有webpack的路径。

  webpack的安装继续在cmd中输入 npm install -D webpack-cli 即可。

  到此所需要的环境已经全部安装完成了,下面来创建一个vue项目。 

  • 创建Vue 项目

  在vs code中打开一个空的文件夹,然后在“终端”中输入:

   vue init webpack vue_demo,其中vue_demo可以自行修改。 如果此时出现如下提示:

     无法加载文件 F:programnodejsnode_globalnode_globalvue.ps1,因为在此系统上禁止运行脚本。

   解决这个问题只需要在cmd中输入以下命令 set-ExecutionPolicy RemoteSigned 解决:

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

     至此,还可能会因为网络问题无法下载vue tample的问题,最近github被墙的很厉害。

  这里推荐一种免费的范强方式,github 搜索 xx-net,具体使用方法有详细的文档。

  我最后是通过配置好xx-net,才把vue项目创建成功的,不然很多包会下载超时导致很多奇怪的问题。

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

   最后项目创建成功后的vs code界面是这样的:

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

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

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

  顺便把Debugger for Chrome也装一下,后面调试的时候有用。在终端输入:npm run dev  启动起来,看到下图,到此,全部安装过程完成了。

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

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用 VS Code 安装 Vue CLI一步步搭建 Vue 项目的初始环境
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏