一、安装Node.js
官网下载Node.js
https://nodejs.org/en/download/
下载完成后，双击.msi文件，将默认安装路径按照喜好修改，其余的设置默认即可，不需要勾选安装的附加选项。
node -v
二、更新Node.js
1.以管理员身份运行命令提示符工具，查看npm版本号，如出现版本号，说明node.js安装成功。
npm -v
2.对npm进行更新
npm -g install npm
3.配置镜像站，加快组件下载速度。
npm config set registry=https://registry.npmmirror.com
三、安装Vue3及插件
全部采用全局安装
1.安装vue-next
npm install vue@next -g
2.安装vue-router
npm install vue-router -g
3.安装webpack
npm install webpack -g
4.安装@vue/cli
如果替换为vue-cli，将安装Vue2版本脚手架。
npm install @vue/cli -g
5.查看版本号
vue -V
vue --version
如果出现以下错误提示
vue : 无法加载文件 C:\Users\lenovo\AppData\Roaming\npm\vue.ps1。未对文件 C:\Users\lenovo\AppData\Roaming\npm\vue.ps1 进行数字签名。无法在当前系统上运行该脚本。有关运行脚本和设置执行策略的详细信息，请参阅 https:/go.microsoft.com/fwlink/?Li
nkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue -V
+ ~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决方法
以管理员身份运行PowerShell
执行：get-ExecutionPolicy，如果显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
选择Y
5.安装webpack-dev-server
npm install webpack-dev-server -g
6.安装webpack-cli
npm install -D webpack-cli -g
7.安装html-webpack-plugin
npm install html-webpack-plugin -g
四、建立Vue.js项目
1.在D盘根目录下新建一个"VueWorkSpace"文件夹，作为来存放vue项目的工作空间。
2.去"C:\Users\root"目录下看有没有.vue-templates文件夹，有的话需要将.vue-templates文件夹删除。
3.以管理员身份运行命令提示符工具，进入"VueWorkSpace"文件夹。
4.四种建立项目方式
https://cli.vuejs.org/zh/guide/
https://cli.vuejs.org/zh/guide/prototyping.html
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
(1)以图形界面建立项目
输入“vue ui”，默认浏览器将自动登录“http://localhost:8000”网址，进入图形界面设置项目。
如果选择vue2，运行依赖中的vue版本号为2.6.14，选择vue3，版本号为3.2.26。
选择任务中的“serve”，可在图形界面开启服务，点击仪表盘中的启动app，可自动进入开发的项目。
界面显示如下提示
Welcome to Your Vue.js App
For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.
Installed CLI Plugins
(2)以命令行形式建立项目
输入“vue create 项目名称”，以命令行形式手动配置建立项目。
按照提示输入“npm run serve” ，登录“http://localhost:8080”网址，进入开发的项目。
To create a production build, run npm run build.
此形式建立的项目，在“vue ui”的图形界面中，将显示“仪表盘”、“插件”、“依赖”、“配置”和“任务”五个选项，其中“插件”中主要有“@vue/cli-service”和“@vue/cli-plugin-XXX”等插件，版本号目前为最新的4.5.15；“依赖”的运行依赖有core-js(3.20.2)和vue(3.2.26，依选择的vue版本有关)，开发依赖主要有@vue/compiler-sfc等项目。
选择任务中的“serve”，可在图形界面开启服务，点击仪表盘中的启动app，可自动进入开发的项目。
如果设置时选择了“TypeScript”，则界面显示如下提示
Welcome to Your Vue.js + TypeScript App
For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.
Installed CLI Plugins
(3)用vite建立项目
输入“npm init vite@latest my-vue-app -- --template vue”，通过vite建立项目。
按照提示运行下面两条命令后，登录“http://localhost:3000”网址，进入开发的项目。
npm install（只运行一次即可）
npm run dev
此形式建立的项目，在“vue ui”的图形界面中，将仅显示“依赖”和“任务”两个个选项，其中“依赖”的运行依赖只有vue(3.2.26)，开发依赖主要有@vitejs/plugin-vue和vite两个项目。
选择任务中的“dev”，可在图形界面启动服务，点击“输出”的网址，可自动进入开发的项目。
界面显示如下提示
Hello Vue 3 + Vite
Recommended IDE setup: VSCode + Volar
Vite Documentation | Vue 3 Documentation
(4)拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
按照提示输入“npm run dev” ，登录“http://localhost:8080”网址，进入开发的项目。
此形式建立的项目，在“vue ui”的图形界面中，将仅显示“依赖”和“任务”两个个选项，其中“依赖”的运行依赖有vue(2.6.14)和vue-root（3.53），开发依赖主要有webpack(3.12.0)等项目。
选择任务中的“dev”，可在图形界面启动服务，点击“输出”的网址，可自动进入开发的项目。
界面显示如下提示，但没有“Installed CLI Plugins”的提示
Welcome to Your Vue.js App
