Vue3.0 от 0 до 1 актуальная боевая система управления электронной коммерцией (первый день)

Vue.js
Vue3.0 от 0 до 1 актуальная боевая система управления электронной коммерцией (первый день)

Глава Статьи Курс Введение:

Все требует времени, и технологии не исключение.Сегодня я пишу главы статей из серии Vue3.0, но надеюсь, что смогу попробовать некоторые новые технологии раньше других.Ведь Vue3.0 уже в бета-версии ,так что официально здесь.Версия не за горами.Если вы изучите и разберетесь заранее,у нас будет больше времени,чем у других,чтобы полностью разобраться в особенностях Vue3.0.Только когда вы действительно понимаете технологию,вы можете правильно определить подходит ли он или нет., следует ли его применять к вашему текущему фактическому проекту.

  • День 1: Говоря о vue3.0, Проект инициализации: Hello World Vue3.0
  • День второй: Апи бой: vue-composition Я инженер апи коллов
  • День 3: Как vue3 реализует повторное использование логики
  • День 4: Настоящая битва: дизайн сильно развязанного фиктивного API и запроса списка заказов
  • День 5: Как реализовать оптимизацию кода

Сегодня первый день: Говоря о vue3.0, проект инициализации: Hello World Vue3.0

Говоря о vue3.0

Сегодня первый день настоящей боевой главы Vue3.0, Фактически, во время прямой трансляции бета-версии Vue3.0 22 апреля Ю Юйси уже подробно представил преимущества и некоторые изменения, внесенные Vue3.0. . На самом деле это можно примерно отразить в следующих пунктах:

  • (0) Используйте прокси-сервер ES2015 в качестве механизма наблюдения. Это удаляет ранее существовавшее предупреждение, удваивает скорость и экономит половину накладных расходов памяти.
  • (1) Переписан виртуальный Дом, оптимизация алгоритма сравнения
  • (2) Производительность обновления повышается в 1,3–2 раза, а скорость SSR повышается в 2–3 раза.
  • (3) Изменения в жизненном цикле, API экспортируется путем именования, а функции жизненного цикла могут быть импортированы по запросу.
  • (4) Более интуитивно понятная реализация повторного использования кода (хуки)
  • (5) Более удобный и связанный метод передачи данных (предоставление и вставка)
  • (6) API экспортируется по именованию, улучшена поддержка Tree Shaking
  • (7) Новая стратегия обновления: дерево блоков (различать динамические узлы и статические узлы)
  • (8) Улучшенная поддержка машинописного текста.

Проект инициализации: Hello World Vue3.0

часть инсталляционного пакета

// 新建目录
mkdir vue_3.0
cd vue_3.0
npm init --y

//安装Vue3.0核心包及其webpack相关包
yarn add vue@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server --dev
//安装webpack其他插件
yarn add html-webpack-plugin mini-css-extract-plugin --dev
//安装loader
yarn add css-loader style-loader file-loader --dev

Новая конфигурация веб-пакета

alt 前端人

webpack.config.js

const path = require("path");
 //vue文件页面css提取
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 //vue格式文件处理
const { VueLoaderPlugin } = require("vue-loader");
//生成html入口文件
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, `dist`),
  },
  optimization: {
    usedExports: true,
    minimize: true,
  },
  resolve: {
    alias: {
      vue: "@vue/runtime-dom",
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: "file-loader",
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" }, 
          { loader: "css-loader" }
        ],
      },
    ],
  },
  devtool: "eval-source-map",
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "[hash][name].css",
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    hot: true, //自动启动热更新
    contentBase: __dirname,
  },
};

src/main.js

import{ createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#root")

src/App.vue

<template>
  <section>
    <h2>{{ title }}</h2>
  </section>
</template>

<script>
export default {
  setup() {
    return {
      title: "Hello World Vue3.0",
    };
  },
};
</script>

<style>
body {
  padding: 50px;
  color: #42b983;
  text-align: center;
  background-color: #282c34;
}
</style>

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width"/>
    <title>vue 3.0</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

package.json

{
  "name": "vue_3.0",
  "version": "1.0.0",
  "description": "vue3.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "pro": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vue/compiler-sfc": "^3.0.0-beta.5",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "vue": "^3.0.0-beta.5",
    "vue-loader": "^16.0.0-alpha.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

успешная операция

alt 前端人

День второй: Апи бой: vue-composition Я инженер апи коллов

День 3: Как vue3 реализует повторное использование логики

🎨 Оригинальность непростая, ставьте лайк и пересылайте в поддержку

Категории