vue3.0从0到1实战电商管理系统(第一天)

14,170 阅读3分钟

章节文章课程简介:

任何事情都需要时间的沉淀,技术也不例外,今天编写Vue3.0系列的章节文章,只是希望能够比别人更早的去尝鲜一些新的技术,毕竟Vue3.0已经Beta版本了,所以里正式版本也不远了,提前去学习和了解,我们就会比别人有更多的时间去充分理解Vue3.0的特性,只有当你真正理解一门技术的时候,才能够正确的判定它是否合适、是否应该运用到你当前的实际项目当中去。

  • 第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0
  • 第二天:Api实战之:vue-composition 我是api调用工程师
  • 第三天:vue3如何实现逻辑复用
  • 第四天:实战之:高解耦式mock api的设计与订单列表查询
  • 第五天:如何实现代码优化

今天是第一天:浅谈vue3.0、初始化项目之:Hello World Vue3.0

浅谈vue3.0

今天是Vue3.0实战章节的第一天,其实在4月22号Vue3.0 Beta版本直播的时候,尤雨溪已经很详细的介绍了Vue3.0带来的优势及其一些改变。其实大致可以体现在以下几点:

  • (0) 使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告,使速度加倍,并节省了一半的内存开销
  • (1) 重写了虚拟Dom、diff算法优化
  • (2) update性能提高1.3~2倍、SSR速度提高了2~3倍
  • (3) 生命周期的改变,API 通过命名导出、可以按需导入生命周期函数
  • (4) 更直观的代码复用实现方式(hooks)
  • (5) 更友好且更耦合的数据通信方式(provide & inject)
  • (6) API 通过命名导出,更好的支持Tree Shaking
  • (7) 新的更新策略: block tree(区分动态节点和静态节点)
  • (8) 更好地支持typescript

初始化项目之: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

新建webpack配置

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 前端人

第二天:Api实战之:vue-composition 我是api调用工程师

第三天:vue3如何实现逻辑复用

🎨 原创不易,支持请点赞、转发