Windows10 安装 Vue3
一、安装Node.js
官网下载Node.js
https://nodejs.org/en/download/下载完成后，双击.msi文件，将默认安装路径按照喜好修改，其余的设置默认即可，不需要勾选安装的附加选项。
node -v二、更新Node.js
1.以管理员身份运行命令提示符工具，查看npm版本号，如出现版本号，说明node.js安装成功。
npm -v2.对npm进行更新
npm -g install npm3.配置镜像站，加快组件下载速度。
npm config set registry=https://registry.npmmirror.com三、安装Vue3及插件
全部采用全局安装
1.安装vue-next
npm install vue@next -g2.安装vue-router
npm install vue-router -g3.安装webpack
npm install webpack -g4.安装@vue/cli
如果替换为vue-cli，将安装Vue2版本脚手架。
npm install @vue/cli -g5.查看版本号
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 -g6.安装webpack-cli
npm install -D webpack-cli -g7.安装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.htmlhttps://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
Windows10 安装 Vue3相关推荐
- Windows10安装Mysql5.7.19.0 msi 版本报错
安装环境:Windows10 安装版本:MySql 5.7.19.0 msi 1.安装5.7.19.0 msi版本Mysql时报如下错误: 2.根据日志分析是缺少visual Studio 2013 ...
- Windows10 安装 cuDNN
Windows10 安装 cuDNN cuDNN下载 登录 选择对应CUDA的cuDNN版本下载 解压缩下载文件: cuda中的文件转到C:\Program Files\NVIDIA GPU Comp ...
- windows10安装docker
windows10安装docker 修改BIOS中的"支持虚拟化服务 开机按住delete键,进入BIOS中,把virtualization由disabled改为enabled 启用Hype ...
- Windows10安装配置ChromeDriver
Windows10安装和配置ChromeDriver 如果要安装ChromeDriver,需要先查询自己chrome浏览器的版本,因为我的chrome浏览器是自己设置的自动推送更新的,所以也不太清楚更 ...
- 【笔记】windows10安装linux双系统教程（可能是现今最简单方法）
这周测试成功了大牛漂移菌教的树莓派系统镜像的压缩方法([树莓派]小空间树莓派镜像系统备份方法img镜像文件压缩方法),虚拟机下备份镜像不太方便,无论是存储空间还是读卡操作都不方便.所以打算装个linu ...
- 【笔记】windows10安装linux（ubuntu）双系统教程（可能是现今最简单方法）
这周测试成功了大牛漂移菌教的树莓派系统镜像的压缩方法([树莓派]不只是一封感谢信!漂移菌手把手指导:小空间树莓派镜像系统备份方法),虚拟机下备份镜像不太方便,无论是存储空间还是读卡操作都不方便.所以打 ...
- oracle19c二次安装报错,Windows10安装Oracle19c数据库详细记录(图文详解)
这篇文章主要介绍了Windows10安装Oracle19c数据库详细记录,文中给大家介绍了修改密码的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以 ...
- linux系统win,Windows10安装运行linux系统的方法
Windows10如何安装运行linux系统?近来不少朋友都向小编咨询了该问题.其实,操作方法并不复杂,只是用户刚刚使用新系统可能会有点陌生.接下来,系统城小编就分享Windows10安装运行linu ...
- win10游戏版如何安装 Windows10安装游戏版的步骤方法
随着微软对windows10系统的不断优化升级,越来越多的用户选择在电脑上安装win10系统,小白最近推出了最新的游戏版本系统,集成了游戏库,下面来看看电脑重装win10游戏版的教程.更多Window ...
最新文章
- 机器学习的数学基础 - 常见分布函数
- 我国近四成程序员单身 盘点各国IT从业者生存现状
- Applese 走方格
- ntdll 异常代码0xc0000374_不要把异常当做业务逻辑，这性能可能你无法承受
- poj 1845 Sumdiv (算数基本定理+逆元）
- AtomicIntegerArray类详解
- string_View理解与用法（一）
- 【gRPC】 在.Net core中使用gRPC
- C++实现二叉查找树
- 基于JAVA+SpringMVC+Mybatis+MYSQL的大学生校园兼职平台
- base | 使用apply族函数进行向量化运算
- ios URLSchemes
- JAVA读取EMF文件并转化为PNG,JPG,GIF格式
- mysql sql语句 参数化_MySQL存储过程准备语句(动态SQL)参数化
- Altium Designer数码管字体、镂空字体
- 5种Python深度学习库和资料
- 秦九韶算法的思想与解多项式算法时间比较附代码
- 记录一个非常实用的gif制作工具licecap
- 《周志华机器学习》简要
- 荣耀v40轻奢版和华为nova8的区别 哪个好