精品久久无码一区二区,亚洲日本色情视频在线,波多野结衣无码一区二区,婷婷午夜精品久久久久久性色AV ,国产精品久久久久久久曹县翰林府 ,五月激情成人,在线观看三级片视频,特级毛片www

寫在前面

前端的打包工具從以前的webpack發(fā)展到今天，已經(jīng)不局限于此，尤其隨著 vite的崛起,快成為了一種速度，也成了學習前端的速度，今天是2022年的最后一天，希望在最后一天大家收獲滿滿，更好的迎接下一年，如果對你有幫助，你的點贊和關(guān)注是最后的支持，點贊不斷，更新干貨不斷，讓我們一起以這份總結(jié)迎接新的一年，元旦快樂，豐收滿滿。

前言

webpack是一個全能選手，配置比較復雜，對新手不太友好。
Rollup是后起之秀，打包更簡潔，配置更簡單。
vite把 rollup 變成開箱即用，便于新手入門。
create-vue 是 Vue3 的專用腳手架，使用 vite 創(chuàng)建 Vue3 的項目，也可以選擇安裝需要的各種插件，基本取代了 vue-cli，除非你想創(chuàng)建 vue2 的項目。

環(huán)境配置

Vite 需要 Node.js^[1] 版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運行，當你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。

管理工具

項目的開發(fā)中離不開包管理工具，對于開發(fā)來說選擇對的包管理工具可以提升效率，目前常用的包管理工具有。

NPM

npm 全稱Node Package Manager，它是Node.js的軟件包管理器，其目標是自動化的依賴性和軟件包管理。這意味著，可以在package.json文件中為項目指定所有依賴項（軟件包），當需要為其安裝依賴項時，只要運行npm install就可以。

YARN

yarn全局安裝

npm i yarn -g

全局刪除

npm r yarn -g

在新版本的node中，corepack中已經(jīng)包含了yarn，可以通過啟用corepack的方式使yarn啟用。首先執(zhí)行以下命令啟用corepack：

corepack enable

查看yarn版本

yarn -v

切換yarn版本，最新版：

corepack prepare yarn@stable --activate

切換為指定版本(1.x.x)的版本：

corepack prepare yarn@1 --activate

常用命令

yarn init （初始化，創(chuàng)建package.json）

yarn add xxx（添加依賴）

yarn add xxx -D（添加開發(fā)依賴）

yarn remove xxx（移除包）

yarn（自動安裝依賴）

yarn run（執(zhí)行自定義腳本）

yarn <指令>（執(zhí)行自定義腳本）

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
// 設(shè)置(淘寶)鏡像
yarn config set registry https://registry.npm.taobao.org
// 恢復(或者重新配置)
yarn config delete registry
# OR
yarn config set https://registry.npmjs.org

PNPM

安裝(全局)安裝

npm install -g pnpm

常用命令

# 初始化項目
pnpm init（初始化項目，添加package.json）
# 安裝依賴
pnpm install（安裝依賴）
# 下載包(XXX)
pnpm install XXX
pnpm i XXX
# -S  默認寫入dependencies
pnpm add XXX -S
# -D devDependencies
pnpm 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
# 設(shè)置存儲路徑
pnpm config set store-dir /path/to/.pnpm-store

Pnpm鏡像配置

配置(淘寶)：
// 查看所有配置
pnpm config list
// 查看(鏡像)配置
pnpm config get registry
// 設(shè)置(淘寶)鏡像
pnpm config set registry https://registry.npm.taobao.org
// 恢復(或者重新配置)
pnpm config delete registry
# OR
pnpm config set registry https://registry.npmjs.org

項目創(chuàng)建

Vite官網(wǎng)提供了創(chuàng)建Vite項目的腳手架create-vite來創(chuàng)建Vite項目，Vue官網(wǎng)提供了create-vue腳手架來替代@/vue/cli來創(chuàng)建基于Vite的Vue3項目。

搭建第一個 Webpack 項目?

vue-cli 用于創(chuàng)建 vue2 的項目；
@vue/cli 用于創(chuàng)建 vue3 的項目，當然也支持 vue2。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# OR
pnpm add -g @vue/cli

然后

vue create <project-name>
# OR
vue ui

搭建第一個 Vite 項目?

兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴更高的 Node 版本才能正常運行，當你的包管理器發(fā)出警告時，請注意升級你的 Node 版本。

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你還可以通過附加的命令行選項直接指定項目名稱和你想要使用的模板。例如，要構(gòu)建一個 Vite + Vue 項目，運行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

查看 create-vite 以獲取每個模板的更多細節(jié)：vanilla，vanilla-ts, vue, vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

社區(qū)模板?

create-vite 是一個快速生成主流框架基礎(chǔ)模板的工具。查看 Awesome Vite 倉庫的社區(qū)維護模板，里面包含各種工具和不同框架的模板。你可以用如 degit 之類的工具，使用社區(qū)模版來搭建項目。

npx degit user/project my-project
cd my-project

npm install
npm run dev

如果該項目使用 main 作為默認分支, 需要在項目名后添加 #main。

npx degit user/project#main my-project

項目支持列表

JavaScript	TypeScript	說明
vanilla	vanilla-ts	用Vite創(chuàng)建vanilla項目
vue	vue-ts	用Vite創(chuàng)建vue項目
react	react-ts	用Vite創(chuàng)建react
preact	preact-ts	用Vite創(chuàng)建preact項目
lit	lit-ts	用Vite創(chuàng)建lit項目
svelte	svelte-ts	用Vite創(chuàng)建svelte項目

搭建一個Vue項目

create-vue 是 Vue3 的專用腳手架，使用 vite 創(chuàng)建 Vue3 的項目，也可以選擇安裝需要的各種插件，使用更簡單。

使用方式

npm init vue@latest(等價)npm create vue@latest
# OR
yarn create vue@latest
# OR
pnpm create vue@latest

可選插件

TypeScript
JSX Support
Vue Router for Single Page Application development
Pinia for state management
Vitest for Unit testing
Cypress for both Unit and End-to-End testing
ESLint for code quality
Prettier for code formating

配置相關(guān)

// vite.config.ts
import { 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,
    // 監(jiān)聽所有地址
    host: '0.0.0.0',
    // 服務(wù)啟動時是否自動打開瀏覽器
    open: false,
    // 允許跨域
    cors: true,
    // 自定義代理規(guī)則
    proxy: {
      
    },
  },
  build: {
    // 設(shè)置最終構(gòu)建的瀏覽器兼容目標
    target: 'es2015',
    // 構(gòu)建后是否生成 source map 文件
    sourcemap: false,
    //  chunk 大小警告的限制（以 kbs 為單位）
    chunkSizeWarningLimit: 2000,
    // 啟用/禁用 gzip 壓縮大小報告
    reportCompressedSize: false,
  },
  css: {
    preprocessorOptions: {
      less: {
        // modifyVars: generateModifyVars(),
        javascriptEnabled: true,
      },
    },
  },
})

語法相關(guān)

<script setup> 是在單文件組件 (SFC) 中使用 composition api 的編譯時語法糖。

Vue3 在早期版本（ 3.0.0-beta.21 之前）中對 composition api 的支持，只能在組件選項 setup 函數(shù)中使用。
在 3.0.0-beta.21 版本中增加了 <script setup> 的實驗特性。如果你使用了，會提示你 <script setup> 還處在實驗特性階段。

<template>
 
<h1>{{ msg }}</h1>
 
<button type="button" @click="add">count is: {{ count }}</button>
 
<ComponentA />
 
<ComponentB />
 
</template>
 
<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>

在 3.2.0 版本中移除 <script setup> 的實驗狀態(tài)，從此，宣告 <script setup> 正式轉(zhuǎn)正使用，成為框架穩(wěn)定的特性之一。

<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
<template>
 
<h1>{{ msg }}</h1>
 
<button type="button" @click="add">count is: {{ count }}</button>
 
<ComponentA />
 
<ComponentB />
 
</template>

社區(qū)鏈接

webpack
vite
vue-cli
vuejs

參考資料

[1]

Node.js: https://nodejs.org/en/

【第11期】這可能是你2022年見過最全的工作總結(jié)

寫在前面

前言

環(huán)境配置

管理工具

NPM

YARN

yarn全局安裝

全局刪除

查看yarn版本

切換yarn版本，最新版：

常用命令

Yarn鏡像配置

PNPM

安裝(全局)安裝

常用命令

Pnpm鏡像配置

項目創(chuàng)建

搭建第一個 Webpack 項目?

搭建第一個 Vite 項目?

社區(qū)模板?

項目支持列表

搭建一個Vue項目

使用方式

可選插件

配置相關(guān)

語法相關(guān)

社區(qū)鏈接

參考資料