vue-cli 5 搭建 vue3 项目

vue-cli 5 搭建 vue3 项目

搭建vue项目，第一种是用命令行搭建,第二种用工具直接搭建，下面主要介绍命令行搭建

命令行搭建步骤如下:

（一）、安装,直接安装就可以了

（二）、全局安装 vue-cli

yarn add @vue/cli# 或着用npm -g @vue/cli

已经安装的可以升级到最新版

yarn -- @vue/cli

查看安装情况: vue -V

截图表示安装成功

然后开始使用 vue-cli 5 搭建项目 ‘vue-cli5’

vue vue-cli5

选择自动配置还是手工配置

选择手工配置

选择插件

选择babel，，路由，css预编译，代码格式化

选择vue 版本

选择 vue3

选择是否使用 class-style

class-style 是 vue 推出的支持 的装饰器，选择使用

选择是否使用 babel 为编译后的 代码注入

先不用管作用是什么，一定要选择Y

选择是否使用 风格的路由

选择使用

选择 css 预编译

选择使用 less

选择语法检测和代码格式化插件

选择 + ，这个是比较常用

另外两个是 +爱彼迎格式化 以及 +通用格式化

第一个选项是只使用 语法检测

选择语法和格式检测的时间

选择在保存的时候就进行检测

选择各插件配置的保存方式

选择将各个配置单独为文件

是否将这个配置保存下来

选择不需要

到这里全部的配置完成

然后就会执行依赖的下载，最后完成的页面如下：

这样就生成了一个 的文件夹，进入这个文件夹，命令行执行 npm run serve,项目运行成功，如下图所示:

这样，vue-cli 5 就搭建项目完成

接下来就可以用中“文件”–>"将文件夹添加到工作区"打开:

目录结构如图所示:

右击项目: “在集成终端中打开”

集成终端命令行中，可以下载包，下载插件，可以运行项目，打包项目:

例如运行项目:

输入: npm run serve或者npm run dev,这个命令是.json定义的

中也运行成功,浏览器中输入: :8080/

参考文章: