阅读 76

从0构建属于自己的vue应用

1 创建应用

mkdir your-own-vue-app
cd your-own-vue-app
yarn init
复制代码

2 打包环境

现在js主流的打包工具为webpack和rollup,webpack适用于应用程序打包,rollup更适用于纯js库的打包,所以这里使用webpack。

2.1 安装webpack@5

yarn add webpack webpack-cli -D
复制代码

2.2 添加webpack配置(webpack.config.js)

webpack.config.js

const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    path: path.join(__dirname, './dist'), // 必须使用绝对路径
    filename: 'index.bundle.js'
  }
}
复制代码

2.3 添加build script

package.json

"script": {
  "build": "webpack build --config webpack.config.js"
}
复制代码

2.4 添加.vue(SFC)文件处理依赖(vue-loader@15)

2.4.1 解析.vue文件

yarn add vue-loader -D
复制代码

webpack.config.js

module.exports.module = {
  rules: [
    {
      test: /\.vue/,
      use: 'vue-loader',
    },
  ],
};
复制代码

vue-loader会将.vue文件解析拆分为三个部分重新import,具体见how vue-loader works

2.4.2 使用webpack已配置的规则

需要使用VueLoaderPlugin来将这三个部分应用到webpack的对应loader进行解析

webpack.config.js

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

module.exports.plugins = [
  new VueLoaderPlugin(),
];
复制代码

2.4.3 解析template(模板语法)

yarn add vue-template-complier
复制代码

为何需要单独安装vue-template-complier

2.4.4 解析script

可直接使用,不需额外配置

2.4.5 解析style

webpack会将vue-loader解析后的style块作为*.css文件处理。

处理css文件一般使用css-loaderstyle-loadercss-loader负责解析@importurl()的引入方式,style-loader负责将处理好的.css文件引入到js文件中。

yarn add css-loader style-loader -D 
复制代码

webpack.config.js

module.exports.module = {
  rules: [
    {
      test: /\.vue/,
      use: 'vue-loader',
    },
    {
      test: /\.css/,
      use: [
        'style-loader',
        'css-loader',
      ],
    },
  ],
};
复制代码

webpack中loader的处理方向是从右到左,从下往上,所以需要将先处理的loader放在下面。

2.5 添加高级支持

2.5.1 添加js兼容性支持(babel@7)

为了使最后构建出来的应用程序支持一些老版本浏览器的js解释器,需要对js代码进行一些修饰。

2.5.1.1 添加babel核心库
yarn add @babel/core -D
复制代码
2.5.1.2 添加babel-loader
yarn add babel-loader
复制代码

webpack.config.js

module.exports.module = {
  rules: [
    {
      test: /\.js/,
      use: 'babel-loader',
    },
    {
      test: /\.vue/,
      use: 'vue-loader',
    },
    {
      test: /\.css/,
      use: [
        'style-loader',
        'css-loader',
      ],
    },
  ],
};
复制代码

这里的babel-loader同时也会对.vue文件中的js代码进行解析

2.5.1.3 配置babel

可以通过直接在配置laoder时配置或在根目录下添加.babelrc.*babel.config.*的方式配置babel,一般独立的配置文件比较受欢迎。

babel config

2.5.2 添加css预处理器支持

css预处理器可以拓展css编写方式,主流的主要有sass/less/stylus,这里用sass作为例子。

当在.vue文件中这样编写<style lang="scss">或使用*.scss文件时,需要安装sass-loader对其进行处理。

yarn add sass-loader node-sass -D
复制代码

node-sass是sass的编译器,需要提前安装python作为编译环境,也可以使用例如dart-sass替换(需安装dart)

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',
      ],
    },
  ],
};
复制代码

2.5.3 添加JSX语法支持

在为了达成某些目标时jsx语法比模板语法更方便,为了使用jsx语法,需要为babel添加preset。

yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props -D
复制代码

babel.config.js

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}
复制代码

3 一个简单的应用程序

3.1 添加vue依赖

yarn add vue
复制代码

3.2 一个简单的SFC

App.vue

<template>
  my own vue app
</template>
复制代码

3.3 入口文件

index.js

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

new Vue(App).$mount('#app');
复制代码

3.4 构建与运行

运行npm run build后将在dist文件夹下获取一个index.bundle.js的文件,手动将其导入如下的html文件后即可看到页面。

index.html

<!DOCTYPE html>
<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>
复制代码

4 代码格式化

以eslint作为例子:

4.1 安装依赖

yarn add eslint -D
复制代码

4.2 使用parser

4.2.1 js parser

一些高版本的js语法eslint无法识别导致报错,需要安装parser解决:

yarn add @babel/eslint-parser -D
复制代码

.eslintrc

{
  "parser": "@babel/eslint-parser",
}
复制代码

4.2.2 vue parser

针对SFC文件,eslint默认无法识别,也需要安装对于的parser:

eslint只能指定一个parser,需要在parserOption中添加@babel/eslint-parser

yarn add vue-eslint-parser -D
复制代码

.eslintrc

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "allowImportExportEverywhere": false
  }
}
复制代码

4.3 使用预设规则

4.3.1 使用js预设规则

市面上有许多预先设定好的js规则,例如standard/airbnb,这里以airbnb为例子:

yarn add eslint-config-airbnb-base eslint-plugin-import -D
复制代码

.eslintrc

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "allowImportExportEverywhere": false
  },
  "extends": "airbnb-base"
}
复制代码

4.3.2 使用vue预设规则

vue官方推出了一套针对.vue文件的预设规则,可以直接使用:

yarn add eslint-plugin-vue -D
复制代码

.eslintrc

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "allowImportExportEverywhere": false
  },
  "extends": [
    "airbnb-base",
    "plugin:vue/recommended"
  ]
}
复制代码

5 易用性改进

5.1 alias

5.1.1 webpack配置

webpack需要能根据别名找到正确的文件路径:

5.1.2 eslint配置

eslint需要能根据别名检查导入是否正确:

yarn add eslint-import-resolver-alias -D
复制代码

.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"],
        ],
      },
    },
  },
}
复制代码

webpack.config.js

module.exports.resolve = {
  alias: {
      '@': path.resolve(__dirname, './src'),
  }
},
复制代码
文章分类
前端
文章标签