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

複製代碼