前端的打包工具从以前的webpack发展到今天，已经不局限于此，尤其随着 vite的崛起,快成为了一种速度，也成了学习前端的速度，今天是2022年的最后一天，希望在最后一天大家收获满满，更好的迎接下一年，如果对你有帮助，你的点赞和关注是最后的支持，点赞不断，更新干货不断，让我们一起以这份总结迎接新的一年，元旦快乐，丰收满满。
(资料图片)
Vite 需要Node.js[1]版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
管理工具项目的开发中离不开包管理工具，对于开发来说选择对的包管理工具可以提升效率，目前常用的包管理工具有。
NPMnpm 全称Node Package Manager，它是Node.js的软件包管理器，其目标是自动化的依赖性和软件包管理。这意味着，可以在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。
YARNyarn全局安装npm i yarn -g全局删除
npm r yarn -g
在新版本的node中，corepack中已经包含了yarn，可以通过启用corepack的方式使yarn启用。首先执行以下命令启用corepack：
corepack enable查看yarn版本
yarn -v切换yarn版本，最新版：
corepack prepare yarn@stable --activate
切换为指定版本(1.x.x)的版本：
corepack prepare yarn@1 --activate常用命令
yarn init （初始化，创建package.json）yarn add xxx（添加依赖）yarn add xxx -D（添加开发依赖）yarn remove xxx（移除包）yarn（自动安装依赖）yarn run（执行自定义脚本）yarn <指令>（执行自定义脚本）yarn global add（全局安装）yarn global remove（全局移除）yarn global bin（全局安装目录）
注意：如果你用的是yarn3作为包管理器运行的时候请在中间加上node
例如
yarn node .\index.js
如果你感觉来回切换太麻烦，直接 yarn init -2,会在项目里面直接用3版本进行
Yarn镜像配置// 查看所有配置yarn config list// 查看(镜像)配置yarn config get registry// 设置(淘宝)镜像yarn config set registry https://registry.npm.taobao.org// 恢复(或者重新配置)yarn config delete registry# ORyarn config set https://registry.npmjs.orgPNPM安装(全局)安装
npm install -g pnpm常用命令
# 初始化项目pnpm init（初始化项目，添加package.json）# 安装依赖pnpm install（安装依赖）# 下载包(XXX)pnpm install XXXpnpm i XXX# -S 默认写入dependenciespnpm add XXX -S# -D devDependenciespnpm add -D# 全局安装pnpm add -g# 移除包(XXX)pnpm remove XXX# 移除全局包(XXX)pnpm remove XXX --global# 更新所有依赖项pnpm up # 更新包(XXX)pnpm upgrade XXX# 更新全局包(XXX)pnpm upgrade XXX --global# 设置存储路径pnpm config set store-dir /path/to/.pnpm-storePnpm镜像配置
配置(淘宝)：// 查看所有配置pnpm config list// 查看(镜像)配置pnpm config get registry// 设置(淘宝)镜像pnpm config set registry https://registry.npm.taobao.org// 恢复(或者重新配置)pnpm config delete registry# ORpnpm config set registry https://registry.npmjs.org项目创建
Vite官网提供了创建Vite项目的脚手架create-vite来创建Vite项目，Vue官网提供了create-vue脚手架来替代@/vue/cli来创建基于Vite的Vue3项目。
搭建第一个 Webpack 项目¶vue-cli用于创建 vue2 的项目；@vue/cli用于创建 vue3 的项目，当然也支持 vue2。npm install -g @vue/cli# ORyarn global add @vue/cli# ORpnpm add -g @vue/cli
然后
vue create搭建第一个 Vite 项目¶# ORvue ui
兼容性注意Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.xnpm create vite@latest my-vue-app --template vue# npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue# yarnyarn create vite my-vue-app --template vue# pnpmpnpm create vite my-vue-app --template vue
查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts,vue,vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
社区模板¶create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。
npx degit user/project my-projectcd my-projectnpm installnpm run dev
如果该项目使用main作为默认分支, 需要在项目名后添加#main。
npx degit user/project#main my-project项目支持列表
| JavaScript | TypeScript | 说明 |
|---|---|---|
| vanilla | vanilla-ts | 用Vite创建vanilla项目 |
| vue | vue-ts | 用Vite创建vue项目 |
| react | react-ts | 用Vite创建react |
| preact | preact-ts | 用Vite创建preact项目 |
| lit | lit-ts | 用Vite创建lit项目 |
| svelte | svelte-ts | 用Vite创建svelte项目 |
create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
使用方式npm init vue@latest(等价)npm create vue@latest# ORyarn create vue@latest# ORpnpm create vue@latest可选插件TypeScriptJSX SupportVue Router for Single Page Application developmentPinia for state managementVitest for Unit testingCypress for both Unit and End-to-End testingESLint for code qualityPrettier for code formating配置相关
// vite.config.tsimport { defineConfig, Plugin } from "vite"import vue from "@vitejs/plugin-vue"import vueJsx from "@vitejs/plugin-vue-jsx"import Components from "unplugin-vue-components/vite"import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"import { resolve } from "path"// import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from "vite-plugin-theme"const pathResolve = (pathStr: string) => { return resolve(__dirname, pathStr);}// https://vitejs.dev/config/export default defineConfig({ base: "./", plugins: [ vue(), vueJsx(), Components({ dts: true, resolvers: [AntDesignVueResolver()], include: [/\.vue$/, /\.tsx$/], directoryAsNamespace: true, }), // viteThemePlugin({ // // Match the color to be modified // colorVariables: [], // }) ], resolve: { alias: { "@": resolve(__dirname, "./src") , } }, server: { // 是否开启 https https: false, // 端口号 port: 3000, // 监听所有地址 host: "0.0.0.0", // 服务启动时是否自动打开浏览器 open: false, // 允许跨域 cors: true, // 自定义代理规则 proxy: { }, }, build: { // 设置最终构建的浏览器兼容目标 target: "es2015", // 构建后是否生成 source map 文件 sourcemap: false, // chunk 大小警告的限制（以 kbs 为单位） chunkSizeWarningLimit: 2000, // 启用/禁用 gzip 压缩大小报告 reportCompressedSize: false, }, css: { preprocessorOptions: { less: { // modifyVars: generateModifyVars(), javascriptEnabled: true, }, }, },})语法相关<script setup>是在单文件组件 (SFC) 中使用composition api的编译时语法糖。
Vue3在早期版本（3.0.0-beta.21之前）中对composition api的支持，只能在组件选项setup函数中使用。在3.0.0-beta.21版本中增加了<script setup>的实验特性。如果你使用了，会提示你<script setup>还处在实验特性阶段。在3.2.0版本中移除<script setup>的实验状态，从此，宣告<script setup>正式转正使用，成为框架稳定的特性之一。{{ msg }}
<script> import { defineComponent, ref } from "vue" import ComponentA from "@/components/ComponentA" import ComponentB from "@/components/ComponentB" export default defineComponent({ name: "HelloWorld", components: { ComponentA, ComponentB }, props: { msg: String, }, setup(props, ctx) { const count = ref(0) function add() { count.value++ } // 使用return {} 把变量、方法暴露给模板 return { count, add, } }, }) </script>
<script setup lang="ts"> import { ref } from "vue" import ComponentA from "@/components/ComponentA" import ComponentB from "@/components/ComponentB" defineProps<{ msg: string }>()const count = ref(0)function add() { count.value++ } </script>x {{ msg }}
社区链接webpackvitevue-clivuejs参考资料[1]Node.js: https://nodejs.org/en/
