vue3安装_2020你要知道的Vue3

最新推荐文章于 2024-06-06 08:07:21 发布

weixin_39784460

最新推荐文章于 2024-06-06 08:07:21 发布

阅读量144

点赞数

文章标签： vue3安装

公众号：前端微服务
GitHub：https://github.com/yongbolu
作者：大哥哥

一、概述

9.18日Vue3发布啦，本次主要围绕Vue更快，更小，更易维护且更易于使用。下面让小编陪你一起踩踩坑。(安装脚手架之前请保证已经安装Node)

二、环境

window10 x64
node v10.16.3
npm v6.13.4
yarn

三、工具介绍

3.1 npm初始化package.json

在现代新建一个 JS 相关的项目往往都是从 package.json 文件开始的，不过这个文件里需要的字段实在是太多了，正常人都记不住，所以 npm 官方提供了 npm init 命令帮助我们快速初始化 package.json 文件。执行之后会有一个交互式的命令行让你输入需要的字段值，当然如果你想直接使用默认值，也可以使用 npm init -y 来超速初始化。

3.2 npx

随着技术的快速发展，发现初始化 package.json 已经无法满足大家的需求了，越来越多的项目需要进行整个项目的初始化。脚手架工具应运而生，除了有通用的脚手架工具 yeoman, sao 之外，很多项目也会开发针对自己项目的脚手架工具，例如 vue-cli, create-react-app 以及专门用来初始化 ThinkJS 项目的脚手架工具 think-cli等。运行这些工具需要先使用 npm install -g 全局安装这些模块之后才能正常运行。每次都执行这两部操作那其实是有点麻烦的，所以 npm@5.2.0 提供了 npx命令将安装运行两个步骤合二为一，直接执行 npx think-cli 会先安装 think-cli 模块然后执行 think-cli 命令，最终完成脚手架的启动。

3.3 npm init

可能 npm 的维护者们都比较懒吧，他们发现这么执行还挺累的，所以在 npm@6.1.0 里增加了 npm init 这种操作，简单来说就是你执行 npm init thinkjs 的话 npm 会补全模块名为 create-thinkjs 并执行 npx create-thinkjs。npm init thinkjs# same asnpx create-thinkjs

四、安装脚手架

4.1. 命令行工具 (CLI)

$ npm install -g @vue/cli 
# OR 
$ yarn global add @vue/cli

4.2. Vite

$ yarn global add @vue/cli@next
# OR
$ npm install -g @vue/cli@next

五、配置环境变量

1、查看node安装路径$ npm config ls

2、到yarn 全局安装vue的路径C:\Users\OakMan\AppData\Local\Yarn\Data\global\node_modules\.bin

3、右键我的电脑 => 属性 =>高级系统设置=> 高级 => 环境变量 => 系统变量中添加VUE_PATH 4、配置路径到Path %VUE_PATH%

六、检查配置

输入以下指令显示版本则为配置成功，一般情况下不需要配置，如果出现vue不是内部指令时，需要进行配置。$ vue -V

七、项目创建

7. 1 通过脚手架Vite 来创建一个vue3项目，对应的命令为：

$ npm init vite-app hello-vue3 
# OR 
$ yarn create vite-app hello-vue3
# 等价于
全局安装create-vite-app
然后cva
# 等价于
npx createa-vite -app
即npx会帮你全局安装用到的包

其实执行 npm init vite-app 时，npm 会补全模块名为 create-vite-app 并执行 npx create-vite-app

$ npm init vite-app hello-vue3
# 等价于
$ npx create-vite-app hello-vue3

7.2 脚手架 vue-cli 来创建一个vue3项目，对应的命令为：


$ vue create hello-vue3
# select vue 3 preset

八、常见问题解决

8.1 脚手架 vue-cli vue不是内部命令解决方法

电脑全局搜索cmd右键以管理员身份运行

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

8.2 脚手架 Vite npx 执行报错问题解决方法

执行:$ npm config edit得到 D:\Program Files\nodejs\node_modules\npm\node_cache看到确实是program files 之间有空格

解决方法：

执行：$ npm config edit

将带空格的路径改写为：D:\Program~1\nodejs\node_modules\npm\node_cache (这是 windows 的一种路径表达方式)

或者直接执行

$ npm config set cache "D:\Program~1\nodejs\node_modules\npm\node_cache"--global

扫码关注我