Apprentissage de l'architecture frontale Vue (1)

Dans cet article, nous partageons principalement avec vous l'apprentissage de l'architecture frontale de Vue (1). J'espère que cela pourra aider tout le monde.

Pensez-y, j'ai déjà réalisé beaucoup de projets architecturaux, certains basés sur vue, basés sur React, basés sur thinkPHP, basés sur Laravel. Si vous en faites trop, vous aurez diverses idées sur l'architecture existante, certaines bonnes et d'autres mauvaises. Bref, ce n'est toujours pas confortable à utiliser. Bien que vue-cli puisse être construit et utilisé rapidement, en particulier vue-cli v3.0, le webpack est inclus dans le @vue/cli SDK, ce qui le rend plus propre et plus concis à utiliser.

D'accord, l'introduction est terminée. Ensuite, je vais repartir de zéro et construire une architecture front-end avec une séparation complète du front-end et du back-end étape par étape.

Étapes

Comme il y a beaucoup de choses à présenter, je vais tout écrire dans un seul article, ce qui est trop long.

Donc, je vais le diviser en :

1. Créer le fichier de configuration du webpack dans l'environnement de développement

2. Configurer eslint, babel, postcss

3. Créer des fichiers de projet et une structure de répertoires

4. Implémenter la simulation d'interface de données locale via koa

5. Créer un fichier de configuration Webpack dans l'environnement de version

6. Créer un fichier de configuration Webpack dans l'environnement de test et les cas de test (TODO)

7. Initialiser automatiquement le projet de build (TODO)

Ces sept articles seront présentés séparément.

Développement

1. Initialiser le projet

1. Créer le dossier du projet

Nous l'appellerons vue-constructBar

1. Initialiser git

git init

1. Initialiser npm

npm init

1. Créer un fichier de projet

Afin de faire fonctionner Webpack, au lieu de simplement parler à ce sujet d'un seul coup Le configurer sans l'exécuter serait un peu vide, alors créons d'abord quelques fichiers et répertoires de projet.
Avant cela, nous installons d'abord deux packages : vue, vue-router, npm i -S vue vue-router.
Nous mettons tous les fichiers liés au code du projet dans un dossier nommé app. Je vais d'abord les créer tous, puis les présenter un par un.

├── 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 seront ignorés.

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

Nous ne nous soucions pas du code spécifique de ces fichiers pour l'instant, nous en reparlerons une fois le webpack configuré.

2. Configurez webpack.config.js

1. Installez une série de packages :

Afin d'exécuter webpack, il est nécessaire d'installer

webpack
webpack-dev-server

Pour traiter les fichiers d'une seule page de vue, installez :

vue-loader

Pour traiter les fichiers scss et les extraire de js, installez :

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

Pour gérer les fichiers d'images et de polices, installez :

file-loader
url-loader

Pour prendre en charge la syntaxe avancée - babel, installez :

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

Pour vérifier le format du code - eslint, installez :

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

1. Configurer le fichier 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
}

Résumé

Cet article fait principalement trois choses :

1. Créer une structure de projet simple

2. Après avoir installé cet article, vous devrez utiliser le package npm à l'avenir

3. Configuration de Webpack pour l'environnement de développement

Recommandations associées :

Partage d'exemple d'opération simple de cookie frontal VUE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!