在这里，使用命令行vue ui创建vue项目，首先需安装Vue、node和vue-cli 3.6及以上的版本 (vue运行需要基于npm一定的版本，所以首先升级npm到一定的版本)。

一、安装Vue

（详细参考）

以下均采用命令行（cmd）
以防万一，以管理员身份运行命令行，如下图

1.安装node.js

首先从node官网下载并安装node.js，之后可利用npm资源管理器下载插件等。

根据自己的需求选择要下载的版本，并将下载好的.exe文件安装。

检查一下node是否安装成功：

node -v

2.安装npm管理器

npm包管理器，是集成在node中的，所以安装了node也就有了npm。有了npm就可以通过命令去下载资源库文件。

输入命令行：

npm -v

查看npm的版本号。

3.安装淘宝镜像(cnpm)

看个人需求安装，安装成功后，可用cnpm 代替npm下载资源文件。

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

二、安装vue-cli

Vue CLi介绍

如已安装旧版本vue-cil，需先卸载再安装，否则vue-cil原始文件一直存在，版本号不会更新！！！

1. 版本号查看

首先查看一下版本号，看是否为 vue-cli 3.6 及以上版本。

vue -V

2.旧版本卸载

1、删除原文件；
2、保险起见，可再执行如下命令。

npm uninstall vue-cli -g

3.新版本安装

npm install -g @vue/cli

安装有点慢，只要不报错就行。

4.检查

vue --version

安装好后，便可以创建Vue项目了。

三、Vue项目的创建

1.项目的创建

📌进入Vue项目管理器

在命令行中键入：

vue ui

浏览器跳转至如下界面：
进入方法如图所示。（跳转页面的左上角）

📌项目位置

点击创建，选择一个位置创建项目。同时关闭Git。

📌项目预设

这里选择手动配置项目。

📌项目功能

打开 Router 和 Vuex ，关闭 Linter / Formatter。

📌项目配置

打开历史记录。

点击创建项目，
这里不保存模板。

创建过程较慢，出现以下界面，便代表创建成功。
如果创建失败，后附解决方案。

📌项目测试

测试一下

进入前端页面，前端页面搭建完成

2.Cannot set property ‘context’ of null 问题的解决

(详细参考)
如果创建失败，出现如下问题：

📌原因分析

1、nodejs版本过低，建议更换10.0以上
2、vue-cli使用vue ui 需要3.6版本及其以上
3、npm的版本过低

📌解决方案

分别通过以下命令，查看当前版本号：

node --version
vue --version
npm --version

更新命令：

更新最新版本vue-cli（两者任选其一，如果没有安装淘宝镜像，选第一种，下同）
npm install @vue/cli -g
cnpm install @vue/cli -g

更新最新版本npm
npm install -g npm
cnpm install -g npm

通过官网下载最新版本的node.js

3.使用vue ui进入页面过慢

使用vue ui命令后进入此页面后一直在加载，这时候我们可以使用另一个命令vue create来创建vue项目。

📌解决方案

vue create [项目名]

Default是自动配置，Manually是手动配置。手动配置过程如下。

Choose vue version 选择项目的vue版本；
Babel是一个转码器，可以将ES6代码转化为ES5代码；
TypeScript 支持使用 TypeScript 书写源码；
Progressive Web App (PWA) Support PWA 支持；
Router 支持 vue-router ；
Vuex 支持 vuex ；
CSS Pre-processors 支持 CSS 预处理器；
Linter / Formatter 支持代码风格检查和格式化；
Unit Testing 支持单元测试；
E2E Testing 支持 E2E 测试。

🧨根据项目需求选择配置
🧨空格键是选中与取消，A键是全选

四、利用 WebStorm 开发 Vue

1.导入项目

打开WebStorm，导入创建的Vue项目。

在界面左下角的 Termianl 中输入命令npm run serve，可启动Vue。

输入 CTAL+C 退出。

📌安装axios

在 terminal中输入：

vue add axios

2.解决npm : 无法加载文件 D:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。

📌查看权限

输入

get-ExecutionPolicy

如果输出：Restricted，即受限制的，表示状态是禁止的。这时候给权限即可。

输入

Set-ExecutionPolicy -Scope CurrentUser

这样问题就解决了！

该笔记由一只国家一级保护废物记录。🤪
写得不好的地方，接受大家指教。😅