Vue Front-end Architecture from scratch (1)

preface

Think of all the architecture projects we’ve done, vue based, React based, thinkPHP based, Laravel based.

If you do a lot, you have all kinds of ideas about the existing architecture, some good, some bad, and in short, it’s still not good to use. Vue-cli is quick to build and use, especially vue-CLI V3.0, which seals webpack into @vue/ CLI SDK, and makes it cleaner and simpler to use.

But, for those of us who love to toss around, well, just kidding. Again, however, we had to make more and more changes to the optimization of the page and the architecture of the project.

Ok, that’s it. Now, I’m going to build a front-end architecture from scratch with a complete separation of the front and back ends.

steps

Because there are many to introduce, all in one article, a little too long.

Therefore, I will be divided into:

1. Create a WebPack configuration file for your development environment

2. Configure ESLint, Babel, and PostCSS

3. Create project files, directory schemas

4. Implement local data interface emulation through KOA

5. Create a WebPack configuration file for the release environment

6. Create webPack configuration files and test cases (TODO) in the test environment

7. Automatic Initialization of build projects (TODO)

These seven will be introduced respectively.

The development of

Initialize the project

1. Create project folder let’s call it Vue-Construct

2. Initialize git git init

3. Initialize NPM NPM init

4. In order to get WebPack running, rather than just talking about configuration without running it, it would be a bit empty, so let’s create a few project files and directories first. NPM i-s vue vUE -router NPM i-s vue vue-router We put all the project code related files in a folder called app. I’m going to create them all, and then I’m going to introduce them one by one.

├ ─ ─ app │ ├ ─ ─ app. Vue │ ├ ─ ─ common │ │ ├ ─ ─ img │ │ ├ ─ ─ js │ │ └ ─ ─ SCSS │ ├ ─ ─ index. The HTML │ ├ ─ ─ index. The js │ ├ ─ ─ the router │ │ └ ─ ─ index. Js │ └ ─ ─ views │ └ ─ ─ home │ └ ─ ─ index. The vue ├ ─ ─ the gitignore ├ ─ ─ package - lock. Json ├ ─ ─ package. The json └ ─ ─ webpack.config.jsCopy the code

Node_modules is ignored.

Let’s leave aside the actual code in these files until WebPack is configured.

Configure webpack.config.js

1. Install a series of packages: In order for WebPack to run, the installation is required

webpack
webpack-dev-server
Copy the code

To handle vUE single page files, install:

vue-loader
Copy the code

To process SCSS files and extract them from JS, install:

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

To process image and font files, install:

file-loader
url-loader
Copy the code

To support advanced syntax -babel, install:

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

To verify the code format -esLint, install:

eslint
eslint-loader
eslint-plugin-html
babel-eslint
Copy the code

2. Configure the webpack.config.js file

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// Create two extracttextPlugins to separate the two CSS
// The base CSS is basically unchanged, so it can be removed to make full use of the browser cache
// App, as an iterative CSS, changes frequently
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 // The CSS is not removed in the development environment})const extractAppCSS
  = new ExtractTextPlugin(
    {
      filename:'static/css/app.[chunkhash:8].css'.allChunks: true.disable: !isProduction // The CSS is not removed in the development environment})// Reduce path writing
function resolve(dir) {
  return path.join(__dirname, dir)
}

// Site icon configuration
const favicon = resolve('favicon.ico')

// __dirname: always returns the absolute path of the js folder being executed
// __filename: always returns the absolute path of the js being executed
// process.cwd(): always returns the absolute path to the folder where the Node command was run
const config = {
  / / sourcemap mode
  devtool: 'cheap-module-eval-source-map'./ / the entry
  entry: {
    app: resolve('app/index.js')},/ / output
  output: {
    path: resolve('dev'),
    filename: 'index.bundle.js'
  },
  resolve: {
    // An extension, such as import 'app.vue', can only be extended to import 'app'
    extensions: ['.js'.'.vue'.'.scss'.'.css'].// Get the path alias to import from the business code
    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 template plugin
    new HtmlWebpackPlugin({
      favicon,
      filename: 'index.html'.template: resolve('app/index.html')}),// Pull out the CSS
    extractBaseCSS,
    extractAppCSS,
    // Hotreplace plugin
    new webpack.HotModuleReplacementPlugin(),
    // More friendly output error messages
    new FriendlyErrorsPlugin()
  ],
  devServer: {
    proxy: {
      // Any HTTP request starting with '/ API' is proffered to localhost:7777, where KOA provides mock data.
      // The koa code is in the./mock directory and the start command is NPM run mock.
      '/api': {
        target: 'http://localhost:7777'.// If it is synchronized, change the address to the address of the backend environment
        secure: false}},host: '0.0.0.0'.port: '9999'.disableHostCheck: true.// For mobile phone access
    contentBase: resolve('dev'), // The directory where the page is loaded by the local server
    // historyApiFallback: true, // for SPA application service
    inline: true.// Refresh in real time
    hot: true  / / using thermal loading plug-ins HotModuleReplacementPlugin}}module.exports = {
  config: config,
  extractBaseCSS: extractBaseCSS,
  extractAppCSS: extractAppCSS
}
Copy the code

conclusion

This article mainly does three things:

1. Create a simple project structure
2. Install this, and then use the NPM package
3. Configure the Webpack for your development environment

Next we will configure ESLint, Babel, PostCSS – Vue front-end architecture from scratch (2)

Complete project code

Vue front-end architecture -by Zip