Vue 프론트엔드 아키텍처 학습 (1)

이 글에서는 주로 Vue 프론트엔드 아키텍처 학습(1)을 공유합니다. 이것은 모두에게 도움이 되기를 바랍니다.

생각해보니 저는 이미 vue 기반, React 기반, thinkPHP 기반, laravel 기반 등 많은 건축 프로젝트를 수행했습니다. 너무 많이 하면 기존 아키텍처에 대해 좋은 점도 있고 나쁜 점도 있고, 요컨대 여전히 사용하기 편하지 않다는 생각이 들 수 있습니다. vue-cli는 빠르게 구축하고 사용할 수 있지만, 특히 vue-cli v3.0에서는 webpack이 @vue/cli의 SDK에 봉인되어 있어 더욱 깔끔하고 간결하게 사용할 수 있습니다. @vue/cli的sdk里了，用起来更加干净、简洁。

好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。

步骤

由于要介绍的很多，全写在一篇里，有些太长了。

所以，我会分为：

1. 创建开发环境下的webpack配置文件

2. 配置eslint、babel、postcss

3. 创建项目文件、目录架构

4. 通过koa实现本地数据接口模拟

5. 创建发布环境下的webpack配置文件

6. 创建测试环境下的webpack配置文件、以及测试用例 （TODO）

7. 自动初始化构建项目（TODO）

这七篇来分别介绍。

开发

一、初始化项目

1. 创建项目文件夹

我们就叫vue-construct吧

1. 初始化git

git init

1. 初始化npm

npm init

1. 创建项目文件

为了能让webpack跑起来，而不是一口气只讲配置而不运行一下，那样未免有些空洞，所以我们先创建一点项目文件和目录。
在这之前我们先安装两个包：vue、vue-router， npm i -S vue vue-router。
我们将项目代码相关文件都放在名为app

자, 소개는 끝났습니다. 다음은 처음부터 시작해서 프론트엔드와 백엔드가 완전히 분리된 프론트엔드 아키텍처를 단계별로 구축하겠습니다.

Steps소개할 내용이 많아서 한 글로 다 적으니 좀 길어지네요. 개발 환경에서 webpack 구성 파일 생성 프로젝트 파일 및 디렉터리 구조 생성 테스트 환경 및 테스트 케이스에서 webpack 구성 파일 생성(TODO)npm 초기화webpack을 실행하려면 한 번에 구성을 이야기하는 것이 아니라 실행해 보세요. 약간 비어 있으므로 먼저 프로젝트 파일과 디렉터리를 만들어 보겠습니다.
이전에 먼저 vue와 vue-router, npm i -S vue vue-router라는 두 개의 패키지를 설치합니다.
우리는 모든 프로젝트 코드 관련 파일을 app이라는 폴더에 넣습니다. 먼저 모두 만들어본 후 하나씩 소개하겠습니다.

├── 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

그래서 다음과 같이 나누어 보겠습니다.
eslint, babel, postcss 구성
	로컬 데이터 구현 koa 인터페이스 시뮬레이션을 통해
릴리스 환경에서 webpack 구성 파일 생성
	빌드 프로젝트 자동 초기화(TODO)
이 7가지를 기사별로 따로 소개하겠습니다. developments 폴더 렛의 호출 vue-construct git init.
	npm init
프로젝트 파일 만들기

node_modules는 무시됩니다.

파일/폴더

1. Purpose

app.vue

vue의 메인 파일로

common

공개코드를 넣어주세요

1. index.html

페이지 템플릿 파일

index.js

프로젝트 메인 항목 파일
router

2. vue

3. views

에 해당하는 라우터 파일을 넣고

.gitignore node_module 무시

🎜 🎜🎜🎜지금은 이 파일의 특정 코드에 관심이 없으며 webpack이 구성된 후에 이에 대해 이야기하겠습니다. 🎜🎜2. webpack.config.js 구성🎜🎜🎜🎜일련의 패키지 설치: 🎜🎜🎜🎜webpack을 실행하려면 🎜

webpack
webpack-dev-server

🎜를 설치해야 합니다. vue 단일 페이지 파일을 처리하려면 다음을 설치하세요. 🎜

vue-loader

🎜 scss 파일을 처리하고 js에서 추상화하려면 다음을 설치하세요: 🎜

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

🎜 이미지와 글꼴 파일을 처리하려면 다음을 설치하세요: 🎜

file-loader
url-loader

🎜 고급 구문 바벨을 지원하려면 다음을 설치하세요: 🎜

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

🎜 확인하려면 code format-eslint, install: 🎜

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

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

🎜Summary🎜🎜이 문서에서는 주로 세 가지 작업을 수행합니다.🎜🎜🎜🎜간단한 프로젝트 구조 만들기🎜🎜🎜🎜설치 후 이 글을 읽고 나중에 npm 패키지를 사용하세요 🎜🎜🎜🎜개발 환경에 맞게 Webpack 구성🎜🎜🎜🎜관련 권장 사항: 🎜🎜🎜VUE 프런트엔드 쿠키 단순 작업 예제 공유🎜🎜

위 내용은 Vue 프론트엔드 아키텍처 학습 (1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!