手把手带你搭建vue3项目

一看就会的超简单创建vue3项目教程

项目准备

cli

查看当前cli版本

vue -V

如果当前版本号小于3，请先按如下方式卸载并安装cli

卸载

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装

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

Node

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
查看当前cli版本

node -v

创建项目

（一）vue create [project-name]

打开命令行运行以下命令来创建一个新项目：

vue create projectname

1.选择模板

2.选择配置项

根据需要选择，按上下键切换选项，回车下一步。这里选择自定义模板

根据需要选择安装，按空格选择，上下键切换，回车下一步。这里全选演示所有选项

（1）选择vue版本

（2）是否使用class风格组件语法

（3）是否使用babel语法转义

（4）是否使用history路由模式

（5）CSS预编译

（6）eslint校验规则

（7）eslint在什么时候进行校验

（8）单元测试（大多数不需要）

（9）E2E方案（一般不需要）

（10）babel postCSS eslint的配置保存在哪

3.保存配置

4.waiting…

5.success

等待完成，至此通过vue create 【name】创建的vue3项目已经搭建完成

（二）vue ui

1.命令行vue ui指令

命令行运行vue ui指令，等待完成自动打开浏览器跳出可视化页面

vue ui

2.可视化页面

页面如下，点击更多–>打开vue项目管理器–>点击创建

3.项目配置（细节同方式一）

选择项目路径–>点击在此创建新项目

项目名称，包管理器等配置，选择完后下一步

选择vue配置模板
这里演示手动配置

选择配置项（同方式一）

配置同方式一

4.创建项目

配置完成后点击创建项目，等待完成即可

5.waiting

6.开启服务

运行

切换到任务界面，serve相当于npm run serve,build相当于npm run build,点击运行开始启动服务

启动App

运行成功后点击启动App打开项目页面

7.success

至此通过vue ui创建vue3项目完成