vue-cli 和 vite

1、vue-cli

1.1 vue cli 安装和使用

当前最新版本是 4.5.13
npm install @vue/cli -g

如果已经安装了，再次执行安装命令会自动进行升级操作

也可以用命令进行升级 npm update @vue/cli -g

1.2 创建项目

vue create 项目名称

输入 vue create 项目名称
看到如下截图

选择 Man ………… ，这个选项，表示手动进行配置

会看到如下截图

# choose vue version  是否选择 vue 的版本，现在默认是 vue2
# babel 是否选择 babel  es6转Es5
# typescript 是否选择 TS
# Progressive web app (PWS) support 项目是否支持 PWA
# router 是否添加路由
# vuex 是否添加 vuex状态管理
# css pre-processors 是否选择 css 预处理器
# Linter / formatter 是否选择 eslint 对代码进行格式限制
# unit testing 是否添加单元测试
# e2e testing 是否添加 e2e 测试

先选择 choose vue version 和 babel 空格可以控制是否选择
弹出界面选择 vue 版本，先选择 3.x
弹出如下图界面

你要把这些配置选项(babel、eslint、等等)放到单独的文件还是放在 package.json 中

选择第一个即可，放到单独的文件中

弹出如下图

是否把刚刚选择保存为预设

想存储为预设就输入 Y 然后输入预设名称即可

按下回车，安装

1.3 开始

删除默认的 components

2、vite

2.1 vite

下一代前端开发与构建工具

随着项目越来越大，模块越来越多，开启服务器需要很长时间，HMR也需要几秒钟才能再浏览器反应出来，，，，天下苦 webpack 久矣

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

2.2 安装和使用

新建一个文件夹，创建 src 文件夹，再里面创建 main.js

再根目录创建 index.html 并导入 main.js

npm i vite

执行 npx vite

vite 默认会对我们的 css 进行处理，但是默认不会处理 less 文件，需要自己安装 less ，但是不需要安装 less-loader

要是处理浏览器前缀，我们也需要进行配置

安装 postcss
安装 npm i postcss-preset-env -D
根目录新建 postcss.config.js

module.exports = {plugins:[require("postcss-preset-env")]
}

2.3 对 TS 的处理

默认情况下 vite 对 TS 是支持的

2.4 vite 原理

搭建一个本地的服务器，请求的也是那些资源，但是请求的资源名字虽然一样，其实内部已经被转化为 es6 的js 代码了

vite 中的服务器 Connect 会对我们的请求进行转发，获取编译后的代码(es6 代码)，给浏览器返回，浏览器可以直接进行解析

2.5 vite 对 vue 的支持

安装vue ，npm i vue@next -D
再 main.js 导入 vue 的 createApp ,导入 App.vue， createApp(App).mount(’#app’)
再 index.html 创建一个 id 为 app 的div
会报错
安装 vue3 单文件组件支持 npm install @vitejs/plugin-vue -D
新建一个 vite.config.js

import vue from '@vitejs/plugin-vue'
module.exports = {plugins:[vue()       ]
}

有可能还需要安装一个 npm i @vue/compiler-sfc -D

vite 对 vue 提供的第一优先级支持

Vue 3 单文件组件支持：@vitejs/plugin-vue

Vue 3 JSX 支持：@vitejs/plugin-vue-jsx

Vue 2 支持：underfin/vite-plugin-vue2

打包后会在 node_modules 的 .vite 文件夹中会有一个预打包

2.6 打包

打包:

npx vite build

想要打包后预览效果 npx vite preview

真实打包中，其实是再 package.json 中的 script 中新建几个节点

2.7 ESBuild 解析

esBuild 特点

超过的构建速度，并且不需要缓存
支持 es6 和 CommonJs 的模块化
支持 es6 和 Tree Shaking（就是把没有用的代码删除掉）
支持 Go js 的 api
支持 TS JSX 等语法编译
支持 SouerceMap
支持代码压缩
支持扩展其他插件

这个东西跟 babel 很像，但是比 babel 更快

vite 是基于 ESBuild 的

ESbuild 是 go 语言编写的，可以直接转换成机器代码，而无需经过字节码

esbuild 可以充分利用 CPU 的多内核，尽可能让他们饱和运行

esbuild 所有的内容都是从 0开始写的，并没有依赖第三方

2.8 vite 脚手架

npm i @vite.js/create-app -g
create-app 项目的名字
然后选择 vue 框架
选择使用 TS
完成
安装项目的所有依赖 npm i

vue-cli 和 vite相关推荐

Vue CLI和Vite
一. Vue CLI安装和使用 1.1 安装全局安装,任何时候都可以通过vue的命令来创建项目 npm install @vue/cli -g 1.2 升级如果是旧版本,可通过该命令升级 npm ...
Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？
本文完整版:<Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗> Vite 与 Vue Cli 对比一.Vite 与 Vue CLI 是什么? Vu ...
Vue CLI 環境設定與打包
Vue CLI (Vue.js Command-Line Interface) Vue CLI 是由 Vue.js 核心團隊所開發,用來提供開發者快速建置 Vue.js 專案並整合相關工具鍊的一套指令 ...
cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
[Vue CLI 3] 插件编写实战和源码分析
当你看过了官方的几个插件之后,慢慢地,其实你也有需求了. 那如何编写一个 Vue CLI 3 的插件呢? 本文代码已经放到 github 上,地址:https://github.com/dailyno ...
vue连线插件_【Vue CLI】手把手教你撸插件
现如今 Vue 作为主流的前端框架之一,其健全的配套工具,活跃的开源社区,让广发码农热衷追捧.Vue CLI 作为其官方的开发构建工具,目前已更新迭代到 4.x 版本,其内部集成了日常开发用到的打包压 ...
vuecli启动的服务器位置,webpack – 在vue cli 3生成的项目中启动dev服务器
我使用npm i -g @ vue / cli在我的 Windows系统上全局安装了vue cli 3. 然后我使用vue create vue-project生成了一个项目我通过提示选择了所需的插 ...
vue项目通过命令行传参实现多环境配置(基于@vue/cli)
大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了 npm run ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...