(一)、创建Vue项目的两种方法

VUE-CLI创建项目

全局安装@vue-cli

1 2	# 全局安装 vue-cli脚手架 npm install -g @vue/cli

初始化项目

1	vue create vue-cli3-project[项目名称]

选择预设

项目初始化

插件选择

选择 Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查

插件选择

Bable--> 主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法

TypeScript --> js的超集

Progressive Web App (PWA) Support --> 提升 Web App 的性能（没用过）

Router --> 路由管理

css preprocessor --> css 预处理器

Linter / Formatter --> 格式检查

Unit Testing --> Unit 测试框架

E2E Testing --> E2E 测试

选择VUE版本

vue版本选择

路由模式选择

是否使用 history模式的路由
No 主要是http://www.a.com/index# 和 http://www.a.com/index 的区别

路由模式选择

选择一个css预处理器 (Less)

选择 Less

选择规范方案

vue-cli默认提供了几套规范，我选择了 ESLint 标准规范

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config  # ESLint 标准规范方案
  ESLint + Prettier

选择检测代码规范的操作（保存时，提交时)

我选择的是保存时

代码检查时机

选择将这些配置文件写入到什么地方

单独创建还是全部写在package.json 里面
In dedicated config files 单独创建

配置文件写入地方

是否保存这份预设配置

如果选择，下次创建一个vue项目，可以直接使用这个预设文件，而无需再进行配置。
根据个人选择

是否保存预设

VITE 创建项目

使用 vite-cli 命令

# pnpm
pnpm create vite

# npm
npm init vite@latest

# yarn
yarn create vite

输入项目名

1	? Project name: vitecreate

选择一个框架（vue）

? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架
     Others  // 其他

选择ts或者js

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript 
    Customize with create-vue ↗ //使用create-vue进行定制
    Nuxt ↗

启动项目

1	cd vitecreate && pnpm install && pnpm run dev

快速初始化（建议使用）

# pnpm
pnpm create vite project-name -- --template vue-ts

# npm 6.x
npm init vite@latest project-name --template vue-ts
 
# npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts
 
# yarn
yarn create vite project-name --template vue-ts

Vite和Cli优缺点

Vue Cli优点	Vue Cli缺点
生态好，应用实际项目多	开发环境慢，体验差
可以和Vue2.x，Vue3.x结合	只支持Vue
直接解析各种类型代码依赖	产物冗余代码多
构建配置项丰富，插件全