vue3.0安装教程（安装并配置Vue3）

vue3.0安装教程（安装并配置Vue3）建议安装 node.js 10 ，尽量安装较高的版本。安装node.js的同时，也会安装npm这个包管理工具。set-ExecutionPolicy RemoteSigned在弹出的选项中，输入【 Y 】或者【 A 】很多人会使用 Windows 10 自带的这个命令行工具，但是在运行某些命令的时候很可能会遇到一些错误，这大部分是因为运行命令时没有系统的最高权限导致的。所以要修改系统的设置，让这些命令拥有系统管理员的权限。默认的，power shell 并没有开启管理员权限，所以需要在这里提前设置并开启管理员权限。在Windows中，找到power shell的图标，用鼠标右键点击图标，选择【以管理员身份运行】，然后在命令行中输入命令

Vue 在国内的发展很快，使用的也非常普遍。一些大公司也都会使用这个前端框架进行前端应用的开发。

在2020年的时候，Vue的版本从第二版升级到了第三版。第三版的变化的地方很多，特别是在框架中默认使用了typescript语言。而且还提供了一些其他功能和工具来提高创建项目的效率。

下面就从安装开发环境开始，基于Vue 3 来梳理一下用这个新版本的Vue 创建应用的过程。

准备工作

大部分人都会使用 Windows 10 操作系统进行项目的开发，所以需要针对操作系统做一些设置，以及安装一些工具。

设置 Windows power shell 的权限

很多人会使用 Windows 10 自带的这个命令行工具，但是在运行某些命令的时候很可能会遇到一些错误，这大部分是因为运行命令时没有系统的最高权限导致的。所以要修改系统的设置，让这些命令拥有系统管理员的权限。

默认的，power shell 并没有开启管理员权限，所以需要在这里提前设置并开启管理员权限。

Step 1：设置 power shell 权限

在Windows中，找到power shell的图标，用鼠标右键点击图标，选择【以管理员身份运行】，然后在命令行中输入命令

set-ExecutionPolicy RemoteSigned

在弹出的选项中，输入【 Y 】或者【 A 】

Step 2: 安装 node.js

建议安装 node.js 10 ，尽量安装较高的版本。安装node.js的同时，也会安装npm这个包管理工具。

Step 3：设置npm的缓存路径（选做）

这一步可以选做。

因为在下一步会安装另外一个工具，会涉及到npm的缓存。但是那个工具不允许目录里存在空格，但是有时候我们在安装Windows的时候，用户名里可能存在空格，比如我的系统用户名为【 Frank Li 】。这样就会存在问题。

首先在 D盘根目录下新建一个文件夹名为【nodejs_config】，然后在这个文件里面再新建两个文件夹，命名为【 node_cache】和【node_global】

然后继续在power shell 里执行下面两条命令

npm config set cache "D:\nodejs_config\node_cache npm config set prefix "D:\nodejs_config\node_global"

这样就避开了目录的空格。还可以通过命令

npm config edit

查看npm的当前配置，此时会弹出一个文本文件窗口，方便查看配置信息。

Step 4：安装 vue-cli

npm install -g @vue/cli npm -v使用 Vite 构建 vue 项目

vite属于下一代前端开发与构建工具。vite需要node.js的版本>=12.0.0

Vite 官方文档

npm init vite-app helloworld cd helloworld npm install npm run dev

最后根据命令行给出的提示，打开浏览器，在地址栏里输入

http://localhost:3000

即可打开默认构建好的vue项目