从0到1搭建企业级vue3脚手架 （三）

haibin
248 阅读5分钟

哈喽大家好，我是haibin。这是我写的第一册技术小书，在掘金会分几篇发布，也可以直接点击下面在线访问全册，希望大家喜欢！

小书介绍

前言

以往像我们搭建vue项目，第一时间想到的就是vue-cli直接命令生成脚手架。

这种方式看似非常轻松、方便，平时写写业务代码或许无所谓，但直到需要你优化项目、解决原理层棘手问题的时候你才猛然发现，过于依赖这个工具反而会导致我们对于底层原理一概不知。这个时候就会措手不及，才逐渐开始去了解底层的部分。

与其到时被动，不如现在主动从0到1去搭建vue3脚手架！

这本小书会手把手地教你如何从“空文件夹”搭建到企业级脚手架。

Vue

现在我们开始来针对Vue做配置了，先来安装Vue。

npm i -S vue

然后模仿Vue-Cli新建一个App.vue文件，在index.ts配置初始化Vue实例，以及在public/index.html配置绑定节点。

<!-- src/App.vue -->
<template>
  <section class='app'>
    {{text}}
  </section>
</template>
<script lang='ts' setup>
import { ref } from "vue";
const text = ref("hello world!");
</script>

<style lang='scss' scoped>
.app {
  color: red;
}
</style>

// src/index.ts
interface Test {
  a: number;
  b: string;
}

const test: Test = {
  a: 111,
  b: "111",
};

console.log(test);

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3-scaffolding-tutorial-example</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Vue & ESLint

vue01.png

在src/App.vue可以看到ESLint还无法识别vue的写法规则，所以还需要要配置下ESLint。

先来安装对应插件eslint-plugin-vue和vue-eslint-parser：

npm i -D eslint-plugin-vue vue-eslint-parser
  • eslint-plugin-vue 针对vue文件的规则和插件
  • vue-eslint-parser 让ESLint识别vue文件 接着来配置ESLint
// ./eslintrc.js
module.exports = {
  ...
  overrides: [
    ...
    {
      files: ["**/*.vue"],                    // 只处理 vue 文件
      parser: "vue-eslint-parser",            // 解析Vue
      extends: ["plugin:vue/vue3-essential"], // 使用vue3的推荐规则
    }
  ]
};

Vue & TypeScript

vue02.png

在src/index.ts可以看到TypeScript还无法识别vue组件类型，所以还需要手动新建文件src/@types/shims-vue.d.ts给vue文件声明下类型。

// src/@types/shims-vue.d.ts
declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const componentOptions: ComponentOptions;
  export default componentOptions;
}

接着执行npm run dev看下效果：

vue03.png

报错信息可以看出还缺少loader来转换vue文件类型，下一节我们来配置Webpack。

Vue & Webpack

先安装对应插件vue-loader、vue-template-compiler。

npm i -D vue-loader vue-template-compiler
  • vue-template-compiler 将vue模板预编译成render函数。
  • vue-loader 结合vue-template-compiler将vue文件转换为js文本。

接着配置Webpack文件:

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: path.resolve(process.cwd(), 'tsconfig.json'),
          appendTsSuffixTo: [/\.vue$/]  // vue内部使用ts
        },
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      }
    ],
  },
};

由于我们使用了Sass，这里还得安装针对Sass的Webpack插件：

npm i -D vue-style-loader css-loader
npm i -D sass-loader node-sass 

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ],
  },
};

执行npm run dev看看效果

vue04.png

这个报错的原因是由于vue-loader未提供具体类型给TypeScript导致的，vue-loader版本为v17.0.0。目前Issues还未有官方答复，我们暂时通过ignoreDiagnostics来解决：

// webpack.base.js
...
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          configFile: path.resolve(process.cwd(), 'tsconfig.json'),
          appendTsSuffixTo: [/\.vue$/],  // vue内部使用ts
          ignoreDiagnostics: [7006]  // 针对vue-loader的bug
        },
      },
      ...
    ],
  },
};

这时再执行构建就会看到预期的效果：

npm run dev
# or
npm run build
http-server dist

vue05.png

CSS方案的选择

单纯地使用css来书写样式有一系列的缺点，比如选择器同名导致样式覆盖、样式规则重复率高、书写效率低等。

目前前端领域比较知名的方案有三类：

  • CSS模块化 通过CSS-in-JS的方式来嵌入样式，能够非常灵活地使用CSS，但上手成本较高。
  • CSS原子化 极大化地减少样式地重复率，也可以提高书写效率，但缺点也非常明显，就是可读性极差，也有一定的上手成本。
  • CSS预处理器 通过预处理器提高书写效率，也能更好地管理css规则，上手成本基本没有。

这里有一张图可以充分说明它们的特点：

css01.png

不太推荐使用CSS-in-JS这种方式，写css还需要另外学对应API，本身就是一种本末倒置的方式，并且写法上也并没有提高多少效率。

反观CSS原子化是一个极度追求书写效率的方式，也极大地提高了复用性，但是可读性太差了，不利于维护。下面给张图大家感受下：

css02.png

当然不可否认，这种方式能够极大地提高效率，可以在一些敏捷开发的场景可以用用，但是在中大型项目还是不太推荐。

最后这里推荐使用CSS预处理器，灵活度也高，复用性可以自己配置，上手成本也低。

CSS预处理器

目前市面上比较知名的CSS预处理器有三种：

  • Sass 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
  • Less 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
  • Stylus 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

上面是这三类预处理器的介绍，这里不做推荐，可以根据个人喜好选择。

Sass & Webpack

在前面我们已经在Webpack配置了sass-loader，接着我们需要使用Sass全局配置，以便于使用Sass Mixin、Sass Variables等特性。

先创建一个样式文件src/assets/css/variables.scss，以及给src/App.vue添加上样式。

// src/assets/css/variables.scss
@charset "UTF-8";
$color1: green;

@mixin size($size){
	font-size: $size;
}

// src/App.vue
.app {
  color: $color1;
  @include size(20px);
}

再来修改Webpack的配置，让它在全局中引入。

// webpack/webpack.base.js
module.exports = {
  ...
  resolve: {
    alias: {
      // 添加别名，可以简写
      '@': path.resolve(__dirname, '../src'),
    }
  },
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "@/assets/css/variables";`,
            },
          },
        ]
      }
    ],
  },
};

这时我们再执行npm run dev就可以看到已经生效了：

css03.png

avatar
文章
阅读
粉丝