Windows10 安装 Vue3

一、安装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