Vue3.x 及相关热门技术

calendar Jun 29, 2022 · 3 分钟 阅读 · vue frontend

热门技术：

  • yarn
  • vite
  • typescript (ts)
  • pinia
  • tailwind

1、Vue3 新特性：

Vue3 新特性
Vue3 新特性

2、Vue3基础：

从vue2到vue3，一文带你看完vue3的新特性

3、Vu3搭建技术变化：

npm  >>  yarn

yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn是为了弥补 npm 的一些缺陷而出现的

npm的缺陷：

  • npm install的时候巨慢，新的项目拉下来要等半天
  • 同一个项目，安装的时候无法保持一致性。由于package.json文件中依赖包版本号的特点，有时会由于安装版本不一致出现bug
  • 安装的时候，包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包。因为npm会把所有的日志输出到终端中，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误

yarn的优点：

  • 速度快：
  • 并行安装：npm是按照队列执行每一个包，也就是必须等到当前包安装完成之后才能继续后面的安装。而yarn是并行执行所有任务，提高了性能
  • 离线模式：如果之前已经安装过一个软件包，用yarn再次安装时会从缓存中获取，就不用像npm那样再从网络下载了

安装yarn

npm install -g yarn 查看版本：yarn --version

命令对照

npm yarn
npm yarn
npm init yarn init
npm init -y yarn init -y
npm install yarn
npm install xxx yarn add xxx
npm install --global xxx yarn global add xxx
npm uninstall xxx yarn remove xxx
npm install xxx@版本号 yarn add xxx@版本号
npm install xxx --save yarn add xxx
npm install xxx --save-dev yarn add xxx --dev
npm update --save yarn upgrade
npm run yarn run
npm run xxx yarn run xxx
npm run dev yarn dev

运行github 项目如下步骤：

git clone xxx npm install npm run dev

或者:

git clone xxx yarn yarn start

webpack >> vite

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个 基于浏览器原生ES模块导入 的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全 跳过了打包 这个概念，服务器随启随用。

同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

Vite具有以下特点：

  • 快速的冷启动
  • 即时热模块更新（HMR，Hot Module Replacement）
  • 真正按需编译 Vite是在推出Vue 3的时候开发的，目前仅支持Vue 3.x，这意味着与Vue 3不兼容的库也不能与Vite一起使用。

安装vite:

npm create vite@latest

创建 vite 项目与Vue CLI类似，Vite也提供用npm或者yarn来生成项目结构的方式。选择一个目录，打开命令提示窗口，依次执行下面的命令构建脚手架项目，并启动项目。

npm init vite-app cd npm install npm run dev

如果使用yarn，则依次执行下面的命令：

yarn create vite-app cd yarn yarn dev

js >> ts (TypeScript)**

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

以下功能是从 ECMA 2015 反向移植而来：

  • 类
  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

教程：TypeScript 教程 | 菜鸟教程 (runoob.com)

vuex >> pinia

Pinia.js是由Vue.js团队核心成员开发的新一代状态管理器，使用Composition Api进行重新设计的，在vuex上面提出了一些改进。

与vuex相比，pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法（在vuex的开发计划中也将会除去同步和异步的区分）。

其次相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。

由于vuex比较完善，因此，pinia更加适合小型项目，vuex更加适合大型项目。

Pinia的优点有：

  • 完全支持Typescript，不需要进行复杂的配置
  • 移除了mutations，不需要再区分同步异步去使用不同的方法，actions同时支持同步和异步，这样形成了state、getters、actions三剑客格局
  • 支持服务端渲染
  • 不再需要套娃了，没有模块嵌套，只有简简单单可以自由使用的store概念，形成了更好的代码分割体验
  • 相比于Vuex更加轻量的设计，压缩代码打包的体积

安装

yarn add pinia@next 或 npm i pinia@next

使用

 1main.ts:
 2import {createPinia} from 'pinia'
 3...
 4app.use(createPinia())
 5
 6store/index.js:
 7import {defineStore} from 'pinia'
 8export const useTodoStore = defineStore({
 9    id: "todo",
10    state:()=>({count:0, title:"test", done:false})
11})
12
13components/xx.vue
14export default defineComponent({
15  setup() {
16    const todo = useTodoStore()
17    return {      // gives access only to specific state
18      state: computed(() => todo.title),
19    }
20  },
21})

css >> Tailwind CSS

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。

Tailwind 包含 flex、pt-4、text-center 和 rotate-90 等类，可以直接在您的标记中组合以构建任何设计。

与 Bootstrap、Foundation 或 Bulma 等框架不同，Tailwind CSS 并不是 UI 套件，因为它没有没有内置的 UI 组件，也没有默认的主题，完全需要开发者根据自身情况来定制设计。 Tailwind 仅仅是一个 CSS 框架，它还是构建设计系统的引擎。

例如在index.html的div标签上使用了flex这个类名，tailwind编译之后会生成flex的样式并将内容输出到output.css文件中：

index.html:

1<div class="flex">
2  <div class="flex">hello world\</div>
3</div>

// 经过tailwind编译之后生成output.css // output.css .flex { display: flex; }

安装依赖首先新建一个test-tailwindcss文件夹，然后输入以下命令：

npm init -y # 初始化package.json文件 npm install -D tailwindcss # 安装tailwind npx tailwindcss init # 创建tailwind.config.js

运行完最后一行命令之后，会在当前文件夹生成一个tailwind.config.js文件，内容如下：

1// tailwind.config.js
2module.exports = {
3  content: [],
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8}

修改content属性，让他能够定位到项目中的html文件的位置，最终内容如下：

1// tailwind.config.js
2module.exports = {
3  // 定位index.html文件
4  content: ["./src/**/*.{html,js}"],
5  theme: {
6    extend: {},
7  },
8  plugins: [],
9}

新建index.html和input.css文件 完成上面的步骤之后，我们在项目根目录下新增一个src文件夹，然后在该文件夹内新增index.html文件和input.css文件：

 1<!-- ./src/index.html -->
 2
 3<!DOCTYPE html>
 4<html lang="en">
 5
 6<head>
 7    <meta charset="UTF-8">
 8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <title>Learn tailwind 3.X</title>
11    <!-- 注意这里引入的output.css文件，后面会用到 -->
12    <link rel="stylesheet" href="/dist/output.css">
13</head>
14
15<body>
16    <h1 class="flex text-3xl font-bold underline text-blue-600">
17        Hello world!
18    </h1>
19</body>
20
21</html>

在input.css文件里载入tailwind的三大部件：

@tailwind base; @tailwind components; @tailwind utilities;

tailwind编译最后一步，使用tailwindcss对当前项目进行编译然后输出css文件：

npx tailwindcss -i ./src/input.css -o ./dist/output.css

运行完以上的命令之后，可以看到在dist文件夹内多出了一个output.css文件，这个文件的末尾几行便是在index.html文件中用到的例如flex、font-bold类的样式：

由于一开始已经在index.html文件中导入了这个output.css文件，所以在浏览器中打开index.html即可看到CSS效果

使用tailwind之后，再也不需要写样式了，直接使用tailwind预先约定好的类名即可，可以大大提升开发效率。

官网：www.tailwindcss.cn

实践：

vite+vue3+ts+pinia+element-plus搭建项目