Build your own VUE application from 0

1 Creating an Application

mkdir your-own-vue-app
cd your-own-vue-app
yarn init
Copy the code

2 Packaging Environment

Now the mainstream JS packaging tools are Webpack and rollup. Webpack is suitable for application packaging, while rollup is more suitable for pure JS library packaging, so webpack is used here.

2.1 installation webpack @ 5

yarn add webpack webpack-cli -D
Copy the code

2.2 Adding the WebPack Configuration (webpack.config.js)

webpack.config.js

const path = require('path')

module.exports = {
  entry: './index.js'.output: {
    path: path.join(__dirname, './dist'), // Absolute paths must be used
    filename: 'index.bundle.js'}}Copy the code

2.3 Adding the Build Script

package.json

"script": {
  "build": "webpack build --config webpack.config.js"
}
Copy the code

2.4 Adding. Vue (SFC) File Processing Dependencies (vue-loader@15)

2.4.1 Parsing. Vue files

yarn add vue-loader -D
Copy the code

webpack.config.js

module.exports.module = {
  rules: [{test: /\.vue/,
      use: 'vue-loader',}]};Copy the code

Vue-loader will parse the. Vue file into three parts and import it again. For details, see How Vue-loader Works

2.4.2 Using rules configured in WebPack

You need to use the VueLoaderPlugin to apply these three parts to the corresponding loader of Webpack for parsing

webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');

module.exports.plugins = [
  new VueLoaderPlugin(),
];
Copy the code

2.4.3 Parsing template(Template Syntax)

yarn add vue-template-complier
Copy the code

Why do I need to install Vue-template-Complier separately

2.4.4 parse the script

It can be used directly without additional configuration

2.4.5 analytic style

Webpack treats the style block parsed by vue-Loader as a *.css file.

CSS files are processed using csS-loader and style-loader. Css-loader resolves the import mode of @import or URL (), and style-loader imports processed. CSS files into JS files.

yarn add css-loader style-loader -D 
Copy the code

webpack.config.js

module.exports.module = {
  rules: [{test: /\.vue/,
      use: 'vue-loader'}, {test: /\.css/,
      use: [
        'style-loader'.'css-loader',],},],};Copy the code

Loaders in WebPack are processed from right to left and from bottom to top, so you need to place the loader that was processed first underneath.

2.5 Adding Advanced Support

2.5.1 Adding JS Compatibility Support (babel@7)

In order for the resulting application to support some of the older browsers’ JS interpreters, some modifications to the JS code are required.

2.5.1.1 Adding the Babel core library

yarn add @babel/core -D
Copy the code

2.5.1.2 added Babel – loader

yarn add babel-loader
Copy the code

webpack.config.js

module.exports.module = {
  rules: [{test: /\.js/,
      use: 'babel-loader'}, {test: /\.vue/,
      use: 'vue-loader'}, {test: /\.css/,
      use: [
        'style-loader'.'css-loader',],},],};Copy the code

The babel-loader here also parses the JS code in the.vue file

2.5.1.3 configuration Babel

Babel can be configured directly during laoder configuration or by adding. Babelrc. * or babel.config.* in the root directory. Generally, a separate configuration file is preferred.

babel config

2.5.2 Adding CSS Preprocessor Support

CSS preprocessors can expand the CSS writing styles. The main ones are SASS /less/ Stylus. Sass is used as an example here.

When writing

yarn add sass-loader node-sass -D
Copy the code

Node-sass is the compiler for SASS, which requires python installed in advance. You can also use dart-sass instead.

webpack.config.js

module.exports.module = {
  rules: [{test: /\.js/,
      use: 'babel-loader'}, {test: /\.vue/,
      use: 'vue-loader'}, {test: /\.s? css/,
      use: [
        'style-loader'.'css-loader'.'sass-loader',],},],};Copy the code

2.5.3 Adding JSX syntax support

JSX syntax is more convenient than template syntax for achieving certain goals, and preset needs to be added to Babel in order to use JSX syntax.

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D
Copy the code

babel.config.js

module.exports = {
  presets: ['@vue/babel-preset-jsx'],}Copy the code

A simple application

3.1 Adding VUE dependencies

yarn add vue
Copy the code

3.2 A simple SFC

App.vue

<template>
  my own vue app
</template>
Copy the code

3.3 Import File

index.js

import Vue from 'vue';
import App from './App.vue';

new Vue(App).$mount('#app');
Copy the code

3.4 Build and Run

After running the NPM run build, you will get an index.bundle.js file in the dist folder. Manually import it into the following HTML file to see the page.

index.html

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <title>my own vue app</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/index.bundle.js"></script>
</body>
</html>
Copy the code

4 Code Formatting

Take esLint as an example:

4.1 Installation Dependencies

yarn add eslint -D
Copy the code

4.2 use the parser

2 js parser

Parser is not recognized by esLint. Parser is not recognized by ESLint.

yarn add @babel/eslint-parser -D
Copy the code

.eslintrc

{
  "parser": "@babel/eslint-parser",}Copy the code

4.2.2 vue parser

For SFC files, esLint does not recognize them by default and needs to have the appropriate Parser installed:

Eslint can specify only one parser. You need to add @babel/eslint-parser to parserOption

yarn add vue-eslint-parser -D
Copy the code

.eslintrc

{
  "parser": "vue-eslint-parser"."parserOptions": {
    "parser": "@babel/eslint-parser"."sourceType": "module"."allowImportExportEverywhere": false}}Copy the code

4.3 Using Preset Rules

4.3.1 Using JS default rules

There are many preset JS rules out there, such as Standard/Airbnb. Here’s airbnb as an example:

yarn add eslint-config-airbnb-base eslint-plugin-import -D
Copy the code

.eslintrc

{
  "parser": "vue-eslint-parser"."parserOptions": {
    "parser": "@babel/eslint-parser"."sourceType": "module"."allowImportExportEverywhere": false
  },
  "extends": "airbnb-base"
}
Copy the code

4.3.2 Using vUE default Rules

Vue has released a set of default rules for. Vue files, which can be used directly:

yarn add eslint-plugin-vue -D
Copy the code

.eslintrc

{
  "parser": "vue-eslint-parser"."parserOptions": {
    "parser": "@babel/eslint-parser"."sourceType": "module"."allowImportExportEverywhere": false
  },
  "extends": [
    "airbnb-base"."plugin:vue/recommended"]}Copy the code

5 Ease of use Improvement

5.1 alias

5.1.1 webpack configuration

Webpack needs to be able to find the correct file path based on the alias:

5.1.2 eslint configuration

Eslint needs to be able to check imports against aliases:

yarn add eslint-import-resolver-alias -D
Copy the code

.eslintrc

{
  "parser": "vue-eslint-parser"."parserOptions": {
    "parser": "@babel/eslint-parser"."sourceType": "module"."allowImportExportEverywhere": false
  },
  "extends": [
    "airbnb-base"."plugin:vue/recommended"]."settings": {
    "import/resolver": {
      "alias": {
        "map": [["@"."./src"],],},},},},}Copy the code

webpack.config.js

module.exports.resolve = {
  alias: {
      The '@': path.resolve(__dirname, './src'),}},Copy the code