用Vue Cli 搭建 vue3项目

119 阅读1分钟

1. node版本要求

最好10 版本以上

1.x 或 2.x的 vue 脚手架工具 叫 vue-cli,从3.x开始叫 @vue/cli,从 4.x版本开始可以创建 vue3.0的项目, Vue Cli 4.x 需要的node版本最好是10版本以上的

2. 安装最新的 Vue Cli 的包

之前安装过了旧版本的 vue-cli

需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 进行卸载
然后再通过 npm install -g @vue/cli 或 yarn global add @vue/cli 安装最新的包

没安装过旧版本的 vue-cli

直接在终端 输入 npm install -g @vue/cli 或 yarn global add @vue/cli 进行安装即可

安装过 @vue/cli 但不是最新的

直接在终端执行更新包的命令即可:npm update -g @vue/cli 或 yarn global upgrade --latest @vue/cli

安装成功与否验证

在终端 输入 vue 命令,结果显示如下,则为安装成功

vue命令行结果.png

可以通过 vue --version 或 vue -V 来查看版本是否安装正确

3. vue create 命令创建新项目

执行 vue create 项目名(自定义),创建一个新项目,结果如下图:

vue create.jpg

有三个预置选项,分别为默认的vue 2 版本,默认的vue 3 版本,还有手动选择特性选项,一般都是选择手动选择特性,即第三项,通过键盘的上下键进行选择控制

选择第三项,然后回车,结果如下图:

manually select.jpg

根据自己的需要选择项目需要的特性,选择完之后,最后回车,就开始创建项目和下载依赖了

安装成功后的目录结构如下图

list.jpg