Vue3.x 及相关热门技术

热门技术:

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

1、Vue3 新特性:

2、Vue3基础:

从vue2到vue3,一文带你看完vue3的新特性_凯der苦练心态的博客-CSDN博客_vue2到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 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

使用

main.ts:
import {createPinia} from 'pinia'
...
app.use(createPinia())

store/index.js:
import {defineStore} from 'pinia'
export const useTodoStore = defineStore({
    id: "todo",
    state:()=>({count:0, title:"test", done:false})
})

components/xx.vue
export default defineComponent({
  setup() {
    const todo = useTodoStore()
    return {      // gives access only to specific state
      state: computed(() => todo.title),
    }
  },
})

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<
<div class="flex">hello world</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文件,内容如下:

// tailwind.config.js
​module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

// tailwind.config.js
​module.exports = {
  // 定位index.html文件
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

<!-- ./src/index.html -->​
<!DOCTYPE html>
<html lang="en">​
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn tailwind 3.X</title>
<!-- 注意这里引入的output.css文件,后面会用到 -->
<link rel="stylesheet" href="/dist/output.css">
</head>​
<body>
<h1 class="flex text-3xl font-bold underline text-blue-600">
Hello world!
</h1>
</body>​
</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搭建项目(一) - 简书 (jianshu.com)


Comments are closed.