Vue CLI和Vite

一. Vue CLI安装和使用

1.1 安装

• 全局安装，任何时候都可以通过vue的命令来创建项目

npm install @vue/cli -g

1.2 升级

• 如果是旧版本，可通过该命令升级

npm update @vue/cli -g

1.3 创建

vue create 项目的名称

1.4 配置

• 空格可以控制是否选择

Choose Vue version	是否选择 vue 版本，目前默认版本 vue2
Babel	是否选择 babel(例如: es6 转换 es5)
TypeScript	是否使用 TypeScript
Progressive Web App (PWA) Support	项目是否支持 PWA
Router	是否默认添加 router 路由
Vuex	是否默认添加 Vuex 状态管理
CSS Pre-processors	是否选择 CSS 预处理器
Linter / Formatter	是否选择 ESLint 对代码进行格式化限制
Unit Testing	是否添加单元测试
E2E Testing		是否添加 E2E 测试

• 选择vue版本

2.x
3.x

• 配置信息文件储放位置

> In dedicated config files	存放独立的文件中
  In package.json			存放package.json
  (全都存放到一个文件中，会让文件变得臃肿，推荐第一项)

二. Vite

官方定位：下一代前端开发与构建工具

随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多；构建工具需要很长时间才能开启服务器，HMR也需要几秒钟才能在浏览器反映出来；Vite是一种新型前端构建工具，能够显著提升前端开发体验

主要由两部分组成

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；

2.1 安装

Vite要求Node版本是大于12版本的

npm install vite –g # 全局安装
npm install vite –D # 局部安装

2.2 使用

• 启动

npx vite

• css

默认支持 css 不需要额外配置

• less

npm install less -D

• vue

Vue 3 单文件组件支持：@vitejs/plugin-vue
Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
Vue 2 支持：underfin/vite-plugin-vue2

• 安装支持vue的插件

npm install @vitejs/plugin-vue -D

• vite.config.js 配置插件

import vue from '@vitejs/plugin-vue'

module.exports = {
  plugins: [
    vue()
  ]
}

2.3 打包

npx vite build

2.4 开启本地服务来预览打包后的效果

npx vite preview

2.5 脚手架

• 安装

npm install @vitejs/create-app -g

• 使用

create-app