通过可视化界面搭建VUE框架 详细教程

一、安装Node.js

1、从官网上下载安装包
2、检查是否安装成功（win+r输入cmd调出窗口）
输入node -v和npm -v出现版本号说明安装成功

3、为了提高效率，我们一般用cnpm代替npm（因为谷歌安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果谷歌的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事来自官网：“这是一个完整npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟一次以保证尽量与官方服务同步“）
输入
npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像
输入cnpm -v检查是否安装成功

4、cnpm install -g vue-cli 安装脚手架
5、vue -V看一下自己安装的版本号

这边采用可视化界面的方法创建项目（前提是vue 的版本是3.0以上）

6、cnpm uninstall vue/cli -g 卸载低版本的脚手架
7、npm install -g @vue/cli安装3.0以上的版本

二、搭建vue项目环境

vue ui 可视化界面

要在自己的存放的项目地址那边输入vue ui

跳出可视化页面 -->点击 再次创建项目

点击 -->默认 —>创建项目

等待创建…
出现下面界面就说明项目创建好了（可以去自己设定的目录下面看看有没有代码生成）

导入项目

打开Vscode导入刚刚创建的项目（文件–>打开文件夹—>选择你的项目）
安装下面的插件

点击 终端–>新建终端–>npm install–>（如果不知道启动命令输入 npm run）—>npm run server


搭建成功