Lernen der Vue-Front-End-Architektur (1)

In diesem Artikel teilen wir hauptsächlich das Erlernen der Vue-Frontend-Architektur (1). Ich hoffe, dass es allen helfen kann.

Denken Sie darüber nach, ich habe bereits viele Architekturprojekte durchgeführt, einige basierend auf Vue, basierend auf React, basierend auf ThinkPHP, basierend auf Laravel. Wenn Sie es zu oft tun, werden Sie unterschiedliche Vorstellungen von der vorhandenen Architektur haben, einige davon sind gut, andere sind schlecht. Kurz gesagt, die Verwendung ist immer noch nicht komfortabel. Obwohl vue-cli schnell erstellt und verwendet werden kann, insbesondere vue-cli v3.0, ist das Webpack im @vue/cli SDK enthalten, wodurch es übersichtlicher und übersichtlicher zu verwenden ist.

Okay, die Einführung ist vorbei. Als nächstes fange ich bei Null an und baue Schritt für Schritt eine Front-End-Architektur mit vollständiger Trennung von Front-End und Back-End auf.

Schritte

Da es viel vorzustellen gibt, werde ich alles in einem Artikel schreiben, was zu lang ist.

Also werde ich es unterteilen in:

1. Erstellen Sie die Webpack-Konfigurationsdatei in der Entwicklungsumgebung

2. Konfigurieren Sie eslint, babel, postcss

3. Projektdateien und Verzeichnisstruktur erstellen

4. Simulation lokaler Datenschnittstellen über koa implementieren

5. Erstellen Sie eine Webpack-Konfigurationsdatei in der Release-Umgebung

6. Erstellen Sie eine Webpack-Konfigurationsdatei in der Testumgebung und den Testfällen (TODO)

7. Das Build-Projekt automatisch initialisieren (TODO)

Diese sieben Artikel werden separat vorgestellt.

Entwicklung

1. Initialisieren Sie das Projekt

1. Erstellen Sie den Projektordner

Wir nennen ihn vue-constructBar

1. Git initialisieren

git init

1. Npm initialisieren

npm init

1. Projektdatei erstellen

Um Webpack zum Laufen zu bringen, anstatt nur zu reden Darüber in einem Atemzug. Die Konfiguration ohne Ausführung wäre etwas leer, also erstellen wir zunächst einige Projektdateien und Verzeichnisse.
Zuvor installieren wir zunächst zwei Pakete: vue, vue-router, npm i -S vue vue-router.
Wir legen alle Projektcode-bezogenen Dateien in einem Ordner mit dem Namen app ab. Ich werde sie zuerst alle erstellen und sie dann einzeln vorstellen.

├── app
│   ├── app.vue
│   ├── common
│   │   ├── img
│   │   ├── js
│   │   └── scss
│   ├── index.html
│   ├── index.js
│   ├── router
│   │   └── index.js
│   └── views
│       └── home
│           └── index.vue
├── .gitignore
├── package-lock.json
├── package.json
└── webpack.config.js

node_modules werden ignoriert.

文件/文件夹	用途
app.vue	作为vue的主文件
common	里面放公共的代码
index.html	页面模板文件
index.js	项目主入口文件
router	放vue对应的router文件
views	放视图文件
.gitignore	忽略node_module

Der spezifische Code in diesen Dateien interessiert uns vorerst nicht, wir werden darüber sprechen, nachdem das Webpack konfiguriert ist.

2. Konfigurieren Sie webpack.config.js

1. Installieren Sie eine Reihe von Paketen:

Um Webpack auszuführen, Es ist erforderlich. Installieren Sie

webpack
webpack-dev-server

Um Vue-Einzelseitendateien zu verarbeiten, installieren Sie:

vue-loader

Um SCSS-Dateien zu verarbeiten und sie aus JS zu extrahieren, installieren Sie:

node-sass
style-loader
css-loader
sass-loader
vue-style-loader
postcss
postcss-loader
autoprefixer
extract-text-webpack-plugin

Um Bild- und Schriftartdateien zu verarbeiten, installieren Sie:

file-loader
url-loader

Um die erweiterte Syntax zu unterstützen – babel, installieren Sie:

babel
babel-loader
babel-plugin-syntax-dynamic-import
babel-plugin-transform-object-rest-spread
babel-polyfill
babel-preset-env

Um das Codeformat zu überprüfen – eslint, installieren Sie :

eslint
eslint-loader
eslint-plugin-html
babel-eslint

1. Konfigurieren Sie die Datei webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 为了抽离出两份CSS，创建两份ExtractTextPlugin
// base作为基础的css，基本不变，所以，可以抽离出来充分利用浏览器缓存
// app作为迭代的css，会经常改变
const isProduction = process.env.NODE_ENV === 'production'
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const extractBaseCSS =
  new ExtractTextPlugin(
    {
      filename:'static/css/base.[chunkhash:8].css',
      allChunks: true,
      disable: !isProduction // 开发环境下不抽离css
    }
  )
const extractAppCSS
  = new ExtractTextPlugin(
    {
      filename:'static/css/app.[chunkhash:8].css',
      allChunks: true,
      disable: !isProduction // 开发环境下不抽离css
    }
  )

// 减少路径书写
function resolve(dir) {
  return path.join(__dirname, dir)
}

// 网站图标配置
const favicon = resolve('favicon.ico')

// __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
// __filename: 总是返回被执行的 js 的绝对路径
// process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
const config = {
  // sourcemap 模式
  devtool: 'cheap-module-eval-source-map',
  // 入口
  entry: {
    app: [
      'babel-polyfill', // 这里是配合babel-present-env导入的动态babel-polyfill,因此npm需dev依赖
      resolve('app/index.js')
    ]
  },
  // 输出
  output: {
    path: resolve('dev'),
    filename: 'index.bundle.js'
  },
  resolve: {
    // 扩展名，比如import 'app.vue'，扩展后只需要写成import 'app'就可以了
    extensions: ['.js', '.vue', '.scss', '.css'],
    // 取路径别名，方便在业务代码中import
    alias: {
      api: resolve('app/api/'),
      common: resolve('app/common/'),
      views: resolve('app/views/'),
      components: resolve('app/components/'),
      componentsBase: resolve('app/componentsBase/'),
      directives: resolve('app/directives/'),
      filters: resolve('app/filters/'),
      mixins: resolve('app/mixins/')
    }
  },
  // loaders处理
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [resolve('app')],
        loader: [
          'babel-loader',
          'eslint-loader'
        ]
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
        options: {
          extractCSS: true,
          loaders: {
            scss: extractAppCSS.extract({
              fallback: 'vue-style-loader',
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true
                  }
                }
              ]
            })
          }
        }
      },
      {
        test: /\.(css|scss)$/,
        use: extractBaseCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: isProduction
            ? 'static/img/[name].[hash:8].[ext]'
            : 'static/img/[name].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          name: isProduction
            ? 'static/font/[name].[hash:8].[ext]'
            : 'static/font/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // html 模板插件
    new HtmlWebpackPlugin({
      favicon,
      filename: 'index.html',
      template: resolve('app/index.html')
    }),
    // 抽离出css
    extractBaseCSS,
    extractAppCSS,
    // 热替换插件
    new webpack.HotModuleReplacementPlugin(),
    // 更友好地输出错误信息
    new FriendlyErrorsPlugin()
  ],
  devServer: {
    proxy: {
      // 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:7777 上，由 koa 提供 mock 数据。
      // koa 代码在 ./mock 目录中，启动命令为 npm run mock。
      '/api': {
        target: 'http://localhost:7777', // 如果说联调了，将地址换成后端环境的地址就哦了
        secure: false
      }
    },
    host: '0.0.0.0',
    port: '9999',
    disableHostCheck: true, // 为了手机可以访问
    contentBase: resolve('dev'), // 本地服务器所加载的页面所在的目录
    // historyApiFallback: true, // 为了SPA应用服务
    inline: true, //实时刷新
    hot: true  // 使用热加载插件 HotModuleReplacementPlugin
  }
}

module.exports = {
  config: config,
  extractBaseCSS: extractBaseCSS,
  extractAppCSS: extractAppCSS
}

Zusammenfassung

Dieser Artikel befasst sich hauptsächlich damit Drei Dinge:

1. Erstellen Sie eine einfache Projektstruktur

2. Nach der Installation dieses Artikels müssen Sie in Zukunft das npm-Paket verwenden

3. Webpack für die Entwicklungsumgebung konfigurieren

Verwandte Empfehlungen:

VUE-Front-End-Cookie-Beispielfreigabe für einfache Bedienung

Das obige ist der detaillierte Inhalt vonLernen der Vue-Front-End-Architektur (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!