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
2.4.4 解析script
可直接使用，不需额外配置
2.4.5 解析style
webpack会将vue-loader解析后的style块作为*.css文件处理。
处理css文件一般使用css-loader和style-loader，css-loader负责解析@import或url()的引入方式，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，一般独立的配置文件比较受欢迎。
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'),
}
},
