快速创建vue项目的三种方式

前言

VUE项目中快速创建项目的三种方式：
vue-cli、vue ui、vite

一、vue-cli创建项目

vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。

特点：
① 开箱即用
② 基于 webpack
③ 功能丰富且易于扩展
④ 支持创建 vue2 和 vue3 的项目
vue-cli 的中文官网首页：https://cli.vuejs.org/zh/

安装

#全局安装 vue-cli
npm install -g @vue/cli

创建

vue create code  //code项目名称

使用之前保存的模板或者手动配置

选择配置，Router : vue路由、Vuex:状态管理工具、Css Pre-processors:使用CSS预编译、Linter/Formatter : 代码规范（自己练习可以不要选，不然报错报到你奔溃）。

vue版本选择

css预编译器选择

代码风格选择

Lint on save：保存即检查
Lint and fix on commit： fix 和 commit 的时候才检查

In dedicated config files：独立文件中放置
In package.json：放在 package.json 中

是否记录本次创建工程的如上配置选项并起个名称

二、vue ui

创建

//基于【可视化面板】创建vue项目
vue ui

code项目名称 ，点击下一步

选择创建方式

选择要添加的选项

vue版本、CSS预编译器、代码风格，风格检查方式。完成后创建项目。
可以选择保存配置，也可以直接创建。

如果需要安装axios等依赖，可以选择安装依赖进行安装。

vite

创建项目
在控制台输入

npm init vite-app vue-code //code项目名
cd ./vue-code //进入项目
npm install //安装依赖包
npm run dev //运行项目