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

时间 2020-05-09

标签 vue3.0 vue 实战管理系统第一天繁體版

原文原文链接

章节文章课程简介：

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

第一天：浅谈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带来的优点及其一些改变。其实大体能够体如今如下几点：css

(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

安装包部分html

// 新建目录
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 --save-dev
//安装webpack其余插件
yarn add html-webpack-plugin mini-css-extract-plugin --save-dev
//安装loader
yarn add css-loader style-loader file-loader --save-dev

复制代码

新建webpack配置前端

webpack.config.jsvue

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.jsjava

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

src/App.vuewebpack

<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.htmlweb

<!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"
  }
}

复制代码

成功运行效果typescript

次日：Api实战之：vue-composition 我是api调用工程师

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

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