哈喽大家好，我是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
在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
在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看下效果：
报错信息可以看出还缺少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看看效果
这个报错的原因是由于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
CSS方案的选择
单纯地使用css来书写样式有一系列的缺点，比如选择器同名导致样式覆盖、样式规则重复率高、书写效率低等。
目前前端领域比较知名的方案有三类：
-
CSS模块化通过CSS-in-JS的方式来嵌入样式，能够非常灵活地使用CSS，但上手成本较高。 -
CSS原子化极大化地减少样式地重复率，也可以提高书写效率，但缺点也非常明显，就是可读性极差，也有一定的上手成本。 -
CSS预处理器通过预处理器提高书写效率，也能更好地管理css规则，上手成本基本没有。
这里有一张图可以充分说明它们的特点：
不太推荐使用CSS-in-JS这种方式，写css还需要另外学对应API，本身就是一种本末倒置的方式，并且写法上也并没有提高多少效率。
反观CSS原子化是一个极度追求书写效率的方式，也极大地提高了复用性，但是可读性太差了，不利于维护。下面给张图大家感受下：
当然不可否认，这种方式能够极大地提高效率，可以在一些敏捷开发的场景可以用用，但是在中大型项目还是不太推荐。
最后这里推荐使用CSS预处理器，灵活度也高，复用性可以自己配置，上手成本也低。
CSS预处理器
目前市面上比较知名的CSS预处理器有三种：
-
Sass2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。 -
Less2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。 -
Stylus2010年产生，来自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就可以看到已经生效了：
