前端自我总结 - yarn、Vite、Vue3、TypeScript、Pinia

yarn

常用命令

# 查看yarn 版本
yarn -v
# 查看yarn配置
yarn config list
# 查看当前yarn源
yarn config get registry
​
# 修改yarn源（初始）
yarn config set registry https://registry.yarnpkg.com
 
# 修改yarn源（此处为淘宝的源）
yarn config set registry https://registry.npm.taobao.org
 
# yarn安装依赖
yarn add 包名          # 局部安装
yarn global add 包名   # 全局安装
 
# yarn 卸载依赖
yarn remove 包名         # 局部卸载
yarn global remove 包名  # 全局卸载（如果安装时安到了全局，那么卸载就要对应卸载全局的）
 
# yarn 查看全局安装过的包
yarn global list 

npm install -g yarn  # 安装yarn 
yarn --version       # 安装成功后，查看版本号
md yarn   # 创建文件夹 yarn  
cd yarn   # 进入yarn文件夹 
 
# 初始化项目 
yarn init # 同npm init，执行输入信息后，会生成package.json文件
 
# yarn的配置项： 
yarn config list # 显示所有配置项
yarn config get <key> # 显示某配置项
yarn config delete <key> # 删除某配置项
yarn config set <key> <value> [-g|--global] # 设置配置项
 
# 安装包： 
yarn install         # 安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat  # 安装一个包的单一版本
yarn install --force         # 强制重新下载所有包
yarn install --production    # 只安装dependencies里的包
yarn install --no-lockfile   # 不读取或生成yarn.lock
yarn install --pure-lockfile # 不生成yarn.lock
# 添加包（会更新package.json和yarn.lock）：
 
yarn add [package] #  在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] #  安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag] #  安装某个tag（比如beta,next或者latest）
 
# 不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
yarn add --dev/-D # 加到 devDependencies
yarn add --peer/-P # 加到 peerDependencies
yarn add --optional/-O # 加到 optionalDependencies
 
# 默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
yarn add --exact/-E # 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T # 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0
 
yarn publish # 发布包
yarn remove <packageName>  # 移除一个包，会自动更新package.json和yarn.lock
yarn upgrade # 更新一个依赖: 用于更新包到基于规范范围的最新版本
yarn run   # 运行脚本: 用来执行在 package.json 中 scripts 属性下定义的脚本
yarn info <packageName> # 可以用来查看某个模块的最新版本信息
 
yarn cache # 缓存
yarn cache list # 列出已缓存的每个包 
yarn cache dir # 返回 全局缓存位置 
yarn cache clean # 清除缓存

vite 构建工具

对比 webpack：

• 需要查找依赖，打包所有的模块，然后才能提供服务，更新速度会随着代码体积增加越来越慢

vite 的原理：

• 使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应

注明：项目打包的时候最终还是需要打包成静态资源的，打包工具 Rollup

问题：

• 基于 webpack 构建项目，基于 vite 构建项目，谁更快体验更好？vite

• 基于 webpack 的 vue-cli 可以创建 vue 项目吗？可以，慢一点而已

vite 创建项目

1. 运行创建项目命令：

# 使用npm
npm create vite@latest
# 使用yarn
yarn create vite
# 使用pnpm
pnpm create vite

1. 输入项目名称，默认是 vite-project

1. 选择前端框架

1. 选择项目类型

1. 创建完毕

1. 进入项目目录，安装依赖，启动项目即可。

Vue 3

1. 需要切换插件

   vue3 组件代码和 vue2 有些不一样，使用的语法提示和高亮插件也不一样。

   • vetur 插件需要禁用，安装 volar插件。

2. 总结 vue3 写法不同

   1. 组件一个根节点非必需

   2. 创建应用挂载到根容器

   3. 入口页面，ESM 加载资源

• 平常组件

  <template>
    <div>节点1</div>
    <div>节点2</div>
  </template>

• main.js

  import { createApp } from 'vue'
  import App from './App.vue'
  // 根据App组件创建一个应用实例
  const app = createApp(App)
  // app应用挂载（管理）index.html的 #app 容器
  app.mount('#app')

• index.html

  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>

vue 3 组件库

库名称	简介
ant-design-vue	PC 端组件库：Ant Design 的 Vue 实现，开发和服务于企业级后台产品
arco-design-vue	PC 端组件库：字节跳动出品的企业级设计系统
element-plus	PC 端组件库：基于 Vue 3，面向设计师和开发者的组件库
Naive UI	PC 端组件库：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快，有点意思
vant	移动端组件库：一个轻量、可靠的移动端组件库，于 2017 年开源
VueUse	基于 composition 组合式 api 的常用函数集合

vue 文档

中文文档：

1. 相关文档

   1. Vue3 中文文档(新) https://cn.vuejs.org/

   2. Vue2 中文文档(旧) Vue.js

   3. Vue3 设计理念 组合式 API 征求意见稿 | Vue 组合式 API

2. 了解框架优点特点

   1. 首次渲染更快

   2. diff 算法更快

   3. 内存占用更少

   4. 打包体积更小

   5. 更好的 Typescript 支持

   6. Composition API 组合 API

组合式 API

1. setup 函数

setup函数是组合式API的入口函数

• setup 函数作为组合式API的起点

• 它在 beforeCreate 之前执行

• 函数中 this 不是组件实例，是 undefined

• 如果数据或者函数在模板中使用，需要在 setup 返回

<template>
  <div class="container">
    <h1 @click="say()">{
 {msg}}</h1>
  </div>
</template>
​
<script>
export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
    // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
    // 返回给模板使用
    return { msg , say}
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}
</script>

2. reactive 函数

reactive 函数通常定义：复杂类型的响应式数据 且 知道明确字段

• 不可以转换简单数据

使用步骤：

• 从 vue 中导出 reactive 函数

• 在 setup 函数中，使用 reactive 函数，传入一个普通对象，返回一个响应式数据对象

• 最后 setup 函数返回一个对象，包含该响应式对象即可，模板中可使用

<template>
  <div>
    <p>姓名：{
 {state.name}}</p>
    <p>年龄：{
 {state.age}} <button @click="state.age++">一年又一年</button></p>
  </div>
</template>
​
<script>
// 1. 导入函数
import { reactive } from "vue"; 
export default {
  setup() {
    // 2. 创建响应式数据对象
    const state = reactive({ name: 'tom', age: 18 })
    // 3. 返回数据
    return { state }
  }
};
</script>

3. ref 函数

通常使用它定义响应式数据，不限类型

• ref可以把简单数据或者复杂数据转换成响应式数据，注意在JS使用时加上 .value，不过模板可省略。

使用步骤：

• 从 vue 中导出 ref 函数

• 在 setup 函数中，使用 ref 函数，传入普通数据（简单or复杂），返回一个响应式数据

• 最后 setup 函数返回一个对象，包含该响应式数据即可

• 注意：使用 ref 创建的数据，js 中需要 .value ，template 中可省略

代码示例：

<template>
  <div>
    <p>
      计数器：{
 { count }}
      <button @click="count++">累加1</button>
      <!-- template中使用可省略.value -->
      <button @click="increment">累加10</button>
    </p>
  </div>
</template>
​
<script>
// 1. 导入函数
import { ref } from "vue";
export default {
  setup() {
    // 2. 创建响应式数据对象
    const count = ref(0);
    const increment = () => {
      // js中使用需要.value
      count.value += 10;
    };
    // 3. 返回数据
    return { count, increment };
  },
};
</script>

4. reactive 和 ref 的选择

在定义响应式数据的函数选择上，遵循：尽量使用 ref 函数支持所有场景，确定字段的对象使用 reactive 可以省去.value。

• reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。

• ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。

推荐用法：

• 如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。

参考代码：

// 1. 明确表单对象有两个字段
const form = reactive({
    username: '',
    password: ''
})

// 2. 后台返回的数据对象
const data = ref(null)
const res = await axios.get('/user/100')
data.value = res.data

5. setup 语法糖

在 script setup 中的顶层变量都可以在模板使用，数据，函数，组件。