VScode中vue的安装及项目的搭建

一、vue的安装

1. 1 安装node.js

• 从node.js官网下载并安装node.js，安装过程选择默认，直接next就行。
  
• 打开cmd命令行工具,输入node -v和npm -v查看版本，若出现相应的版本号说明安装成功(npm包管理器，是集成在node中的,功能类似java中Maven)
  

1.2 配置淘宝cnpm镜像

由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要cnpm淘宝镜像。

在命令行中输入：

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

然后等待，没报错表示安装成功。

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

在命令行运行命令：

npm install -g vue-cli 

然后等待安装完成。

二、VScode中搭建vue项目

2.1 VScode安装插件

直接在VScode中搜索选择需要安装的插件安装即可。

2.2 使用vue-cli脚手架构建工具构建项目

• 在VScode中，点击终端（Terminal）菜单，选择新建终端（new Terminal），创建一个cmd命令行终端窗口；(注意是cmd窗口，开始默认是powershell)
  
• 将vue-cli的版本升级

npm install -g @vue/cli

• 切换到对应的准备存放代码的目录，输入命令vue init webpack hello-world 或者vue create hello-world创建项目（hello-world为项目名），然后按照提示进行操作；
  
• 安装完毕后 运行 npm run dev 会出现访问地址：http://localhost:8080
  
  

三、启动vue-element-admin工程

• GitHub下载源码链接（建议下载打tag的版本）
• 在VScode中，点击终端（Terminal）菜单，选择新建终端（new Terminal），创建一个cmd命令行终端窗口；(注意是cmd窗口，开始默认是powershell)
• 切换到vue-element-admin下目录，输入npm install，开始安装（需要一段时间）
• 然后输入npm run dev运行项目。