在VisualStudioCode中搭建VUE框架

在VisualStudioCode中搭建VUE框架

本文将会详细的记录下，从下载VSCode到安装Vue框架的过程。

一、下载VSCode

• 下载链接: VSCode官网.
• 点击蓝色下载框进行下载
  

二、安装常用插件

• 打开软件点击图中位置
  
• 选择需要的插件进行下载
  
• 这里演示如何下载中文补丁包
  在搜索框中输入Chinese，选择图中红圈的位置地方进行下载。
  因为已经下载过，正常显示为下方的Install的绿框
  
• 演示下如何启用中文插件
  打开命令栏：Ctrl + Shift+P
  在命令栏中输入Language选择zh-cn
  
  

三、安装Node.js

• 安装vue之前需要借助npm指令集，所以这里需要先安装下Node.js。
  下载链接: Node.js中文网.
  选对应的操作系统进行安装
  

• 验证安装是否成功
  本文安装环境为：Windows10
  通过命令窗口输入下方指令

  node -v

  npm -v

• 别的文章中是win10 cmd命令窗口来实现的，我这边无法识别下面的命令
  可能是因为安装过git，所以我这里是用git的命令窗口
  出现版本号就安装成功。
  

四、配置cnpm

• 国内访问npm比较慢，这边配置国内的镜像进行访问
  打开命令窗口输入下方的命令

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

  

  cnpm -v

  

• 通过cnpm搭建express环境

  cnpm install express -g

  

• 通过cnpm安装vue-cli脚手架

  cnpm install vue-cli -g

  

• 验证vue脚手架是否安装完成

  vue -V

  

五、创建VUE项目

• 在VSCode中打开终端
  

• 输入创建项目的指令
  以下为正常的情况

  vue init webpack < 此处为项目名称 >

  

• 非正常情况，出现红字“vue : 无法加载文件”等字眼，解决方法如下
  系统中搜索

  Windows PowerShell

  
  输入下方指令后，输入A回车

  set-ExecutionPolicy RemoteSigned

  

• 输入基本信息，可以参考下图
  结尾推荐选择稍后安装
  

• 安装上图黄字，用npm的替换成cnpm进行安装
  数据量太大只展示结果

  cd < 创建的文件夹目录 >

  cnpm install

  cnpm run dev

  

• 到此在VisualStudioCode中搭建VUE框架完成
  登入上述的 http://localhost:8080
  

总结

最近打算开始学习VUE，选择了VSCode这款编译器，配置环境的过程还是相对繁琐，这边根据网上的各种资料，从零搭建VUE环境。希望能够帮助到你，亲测有效，上述截图均原创。