【Vue.js 3.0】Day-01 创建 Vue3.0 工程

1.使用 vue-cli 创建

官方文档 :   https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

// 查看@vue/cli版本，确保@vue/cli版本在4.5.@以上
vue --version   
vue -V

// 安装或者升级你的@vue/cli、 覆盖安装最新版本;
npm install -g @vue/cli


//1.创建项目 
vue create vue-cli-demo

// 2.配置选项 
? Please pick a preset:
  vue_shop_preset ([Vue 2] babel, router, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)  // 默认安装也可以
> Manually select features                 // 可以走自定义安装 


// 3.自定义安装选项 
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (`*`) Choose Vue version
 (`*`) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
​
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)

  2.x
> 3.x


// 4.走默认
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel
? Choose a version of Vue.js that you want to start the project with 3.x
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
​
> In dedicated config files
> In package.json

// 5.将项目运行
cd vue-cli-demo
npm run serve

2.使用 vite 创建

官方文档: https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网: https://vitejs.cn

什么是vite? 

1. 下一代前端开发构建工具！ 
2. 现一代的构建工具是 webpack ， 像 react 脚手架， vue脚手架 目前来说， 都是依赖于 webpack，没有 webpack， 这些脚手架也就不能工作了！

优势如下：

1. 开发环境中，无需打包操作，可快速的冷启动；  
2. 轻量快速的热重载(HMR)； （一改代码，就做局部更新）
3. 真正的按需编译，不再等待整个应用编译完成。（动态的引入和代码的分割）

 传统构建与vite构建对比图？

// 构建项目 
npm init  vite@latest

√ Project name: ... vite-demo
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
​
>   》Vue
>   React
>   Preact
>   Lit
>   Svelte

》JavaScript
  TypeScript
  Customize with create-vue
  Nuxt


cd vite-demo
// 安装依赖
npm i
​
// 运行项目
npm run dev 

另一种方式创建 

// 创建工程
npm init vite-app <project-name>

// 进入工程目录
cd <project-name>

// 安装依赖
npm install

// 运行
npm run dev