vue 快速入门 系列 —— vue loader 扩展
2021-07-22 16:34
776 查看
其他章节请看：
vue loader 扩展
在vue loader一文中，我们学会了从零搭建一个简单的，用于单文件组件开发的脚手架。本篇将在此基础上继续引入一些常用的库：vue-router、vuex、axios、mockjs、i18n、jquery、lodash。
环境准备
Tip: 此环境本质就是“vue loader”一文最终生成的代码，略微精简一下：删除不必要的文件、wepback.config.js 注释掉 eslint 以及自定义 loader。
项目结构：
vue-loader-test - src // 项目源码 - index.html // 页面模板 - index.js // 入口 - package.json // 存放了项目依赖的包 - webpack.config.js // webpack配置文件
// 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>Document</title> </head> <body></body> </html>
// index.js
console.log('hello');
// package.json
{
"name": "vue-loader-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-env": "^7.14.7",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.4",
"eslint": "^7.30.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-vue": "^7.12.1",
"eslint-webpack-plugin": "^2.5.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.2",
"less": "^4.1.1",
"less-loader": "^7.3.0",
"mini-css-extract-plugin": "^1.6.2",
"node-sass": "^6.0.1",
"postcss-loader": "^4.3.0",
"postcss-preset-env": "^6.7.0",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"sass-loader": "^10.2.0",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^4.3.3",
"ts-loader": "^7.0.5",
"typescript": "^4.3.5",
"url-loader": "^4.1.1",
"vue": "^2.6.14",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {
VueLoaderPlugin
} = require('vue-loader');
const process = require('process');
process.env.NODE_ENV = 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const postcssLoader = {
loader: 'postcss-loader',
options: {
// postcss 只是个平台，具体功能需要使用插件
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
browsers: 'ie >= 8, chrome > 10',
},
],
]
}
}
}
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
oneOf: [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: {
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}
}
]
},
{
use: [
process.env.NODE_ENV !== 'production'
? 'vue-style-loader'
: MiniCssExtractPlugin.loader,
'css-loader'
]
},
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: true // 关闭热重载
}
},
{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: 'url-loader',
options: {
// 调整的比 6.68 要小，这样图片就不会打包成 base64
limit: 1024 * 6,
esModule: false,
},
},],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// sass-loader version >= 8
sassOptions: {
indentedSyntax: true
},
additionalData: `$size: 3em;`,
}
}
]
},
{
test: /\.less$/,
use: [
'vue-style-loader',
// +
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: {
localIdentName: '[local]_[hash:base64:8]'
}
}
},
postcssLoader,
'less-loader'
]
},
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.js$/,
// exclude: /node_modules/,
exclude: file => (
/node_modules/.test(file) &&
!/\.vue\.js/.test(file)
),
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env']
]
}
}
},
{
test: /\.ts$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] }
},
{
test: /\.pug$/,
loader: 'pug-plain-loader'
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin(),
],
mode: 'development',
devServer: {
hot: true,
open: true,
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
},
extensions: ['.ts', '.js'],
},
};
安装依赖，启动服务，如果在自动打开的网页的控制台中输出：hello，则说明环境准备就绪。
> npm i // 启动服务 > npm run dev
vue-router
Tip：由于 vue-router 官网的"起步"章节，不是以单页面组件的形式介绍的，所以笔者另外参考了 vue-cli 创建带有 vue-router 的项目。
将 vue-router 引入工程，步骤如下：
> npm i vue-router@3
创建 App.vue，包含一个导航，导航指向两个组件，分别是 Home 和 About：
// src/App.vue <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template>
在 src/views 文件夹中创建两个组件:
// views/Home.vue <template> <div> i am Home </div> </template>
// views/About.vue <template> <div> i am About </div> </template>
创建路由，并将路由统一放在 src/router 文件夹中：
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入 Home 组件
import Home from '../views/Home.vue'
// 在一个模块化工程中使用 vue-router，必须通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter)
// 定义路由 map
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
// 创建路由实例
const router = new VueRouter({
routes
})
export default router
最后在 src/index.js 中使用路由:
// index.js
import Vue from 'vue';
import router from './router';
import App from './App.vue';
new Vue({
// 通过 router 配置参数注入路由，从而让整个应用都有路由功能
router,
el: 'body',
render: (h) => h(App),
});
重启服务，页面显示如下：
Home | About i am home
默认是导航是 Home，点击 About，主体内容则变成
i am About。
vuex
Tip: 参考 vue-cli 创建的带有 vuex 的项目。
将 vuex 引入工程，步骤如下：
> npm i vuex@3
创建 vuex 文件，统一将 vuex 放在 src/store 文件夹中：
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
// 在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
},
actions: {
},
modules: {
},
});
通过 store 配置参数注入 vuex，从而让整个应用都有 vuex 功能：
// src/index.js
+ import store from './store';
new Vue({
// 为了在 Vue 组件中访问 this.$store property，需要为 Vue 实例提供创建好的 store
// Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制
+ store,
el: 'body',
render: (h) => h(App),
});
在子组件（Home.vue）中访问 store:
// views/Home.vue
...
<script>
export default {
created() {
console.log(this.$store.state.count);
},
};
</script>
重启服务，浏览器控制台输出 0。
axios
Tip: 参考 vue-cli 安装 axios 插件后生成的代码。
将 axios 引入工程，步骤如下：
> npm i axios@0
创建 axios.js：
// src/plugins/axios.js
import Vue from 'vue';
import axios from 'axios';
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
const config = {
// baseURL: process.env.baseURL || process.env.apiUrl || ""
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
(config) =>
// Do something before request is sent
config,
(error) =>
// Do something with request error
Promise.reject(error)
,
);
// Add a response interceptor
_axios.interceptors.response.use(
(response) =>
// Do something with response data
response,
(error) =>
// Do something with response error
Promise.reject(error)
,
);
// Vue.use(Plugin) 会调用此方法
// 方法中会将 _axios 暴露给 Vue.axios、window.axios
// 并可以通过 Vue 的实例上的 axios 和 $axios 访问到 _axios
Plugin.install = function (Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
},
},
$axios: {
get() {
return _axios;
},
},
});
};
Vue.use(Plugin);
export default Plugin;
在入口文件中引入 axios.js：
// index.js import './plugins/axios';
在 Home.vue 中使用 axios:
// Home.vue
...
<script>
export default {
created() {
console.log('this.$axios: ', this.$axios);
},
};
</script>
重启服务，浏览器控制台输出：
this.$axios: ƒ wrap() {
var args = new Array(arguments.length);
for (var i = 0; i < args.length; i++) {
args[i] = arguments[i];
}
return fn.apply(thisArg, args);
}
至此，axios.js 已成功引入到我们的工程。在 mockjs 中我们还会用到 axios。
mockjs
注：在 npm 中查看 vue-cli-plugin-mock，好似需要在 vue.config.js 中配置。我们的工程不是通过 vue-cli 创建的，所以这里直接使用 mockjs。
将 mockjs 引入工程，步骤如下：
> npm i -D mockjs@1
创建 mock：
// src/mock/index.js
import Mock from 'mockjs';
// 定义了一个请求拦截
Mock.mock('/list', {
'name': '@name',
'age|10-20': 10,
'birthday': '@date("yyyy-MM-dd")'
});
在入口文件中引入 mock:
// index.js // 会自动加载 mock 下的 index.js import './mock'
最后测试 mock 是否能拦截
/list请求：
// Home.vue
...
<script>
export default {
created() {
// 发送请求
this.$axios.get('/list').then(res => {
console.log('res.data: ', res.data);
})
},
};
</script>
重启服务，浏览器控制台输出如下类似数据：
res.data: {name: "Ruth Brown", age: 14, birthday: "1973-08-18"}
Tip: 在实际项目中，mock 还需要进一步配置，比如可以在 mock/index.js 中加载 mock 文件夹中其他的 mock 文件，方便扩展。
i18n
Tip：参考 vue i18n 官方文档 和 vue-cli 安装 i18n 插件后生成的代码。
由于我们是 vue 项目，所以就选用 vue i18n。
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
将 i18n 引入工程，步骤如下：
> npm i vue-i18n@8
新建中英文两个 json 文件，用于存放需要翻译的字段（中文和英文），并统一放在 src/language 目录中。
// en.json
{
"apple": "Apple"
}
// zh.json
{
"apple": "苹果"
}
新建 i18n 模块，创建并导出 i18n 实例：
// src/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages() {
// 通过 require.context() 函数来创建自己的 context
// 可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
// 返回一个函数，函数有三个属性：resolve, keys, id。
// keys 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求
const locales = require.context('./language', true, /\.json$/i)
const messages = {}
locales.keys().forEach(file => {
const matched = file.match(/([A-Za-z0-9-_]+)\./i)
const locale = matched[1]
messages[locale] = locales(file)
})
// messages: {en: {…}, zh: {…}}
console.log('messages: ', messages);
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
在入口文件中导入 i18n 实例，并配置到 Vue 实例中：
// index.js
...
import i18n from './i18n'
new Vue({
...
i18n,
el: 'body',
render: (h) => h(App),
});
接着就可以在 vue 组件中使用：
// Home.vue
<template>
<div>
i am home
<p>{{ $t("apple") }}</p>
</div>
</template>
重启服务，页面显示 ”Apple“:
Home | About i am homeApple
为什么显示的是英文，而非中文？由 i18n.js 中的这段代码决定：
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages()
})
process 是 node 中的对象，而这里是在 .js 中使用。可以这么理解：
locale: process.env.VUE_APP_I18N_LOCALE || 'en', 等效于 locale: undefined || 'en',
所以是英文。如果想在模块中使用 process.env.VUE_APP_I18N_LOCALE，还需要一些配置。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
// DefinePlugin 会直接将内容替换了，而不是一个字符串
// 所以我们不能直接写 'zh'，经常会这么写：JSON.stringify('zh')
'process.env.VUE_APP_I18N_LOCALE': JSON.stringify('zh'),
'process.env.VUE_APP_I18N_FALLBACK_LOCALE': JSON.stringify('zh'),
})
]
};
Tip: DefinePlugin 允许在编译时将你代码中的变量替换为其他值或表达式
重启服务，页面显示 ”苹果“:
Home | About i am home苹果
在浏览器中找到如下代码：
{\n locale: \"zh\" || false,\n fallbackLocale: \"zh\" || false,\n messages: loadLocaleMessages()\n}
i18n.js 中的 process.env.VUE_APP_I18N_LOCALE 被替换成 zh。
jquery
将 jquery 引入工程，步骤如下：
> npm i -D jquery@3
配置别名：
// webpack.config.js
module.exports = {
resolve: {
alias: {
'jquery': path.resolve(__dirname, './node_modules/jquery/dist/jquery.min.js')
},
},
在需要使用的地方引用：
// Home.vue
...
<script>
import $ from 'jquery';
export default {
mounted() {
$('#app').css('color', 'blue')
},
};
</script>
重启服务，页面中文字变为蓝色，说明 jquery 引入成功。
lodash
将 lodash 引入工程，步骤如下：
> npm i -D lodash@4
在 Home.vue 中使用 lodash:
// Home.vue
...
<script>
// webpack 模块 能以各种方式表达它们的依赖关系
// 比如 es 的 import、commonjs 的 require等等
let _ = require('lodash')
export default {
mounted() {
// 调用 lodash 的 random 方法
console.log(_.random(1,10))
},
};
</script>
重启服务，浏览器控制台输出1~10之间一个随机数，说明 lodash 引入成功。
Tip: jquery 同样可以使用这种方式
其他章节请看：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
- vue 快速入门 系列 —— 虚拟 DOM
- CSLA.NET快速入门系列——实现DataPortal扩展（一）
- vue 快速入门 系列 —— 初步认识 vue
- 快速入门系列--WCF--08扩展与新特性
- vue 快速入门 系列 —— vue 的基础应用（下）
- CSLA.NET快速入门系列——实现DataPortal扩展（二）
- vue 快速入门 系列 —— vue 的基础应用（上）
- CSLA.NET快速入门系列——实现DataPortal扩展（三）
- vue 快速入门 系列
- Vue学习系列 -- vue-router 快速入门
- Vue.js——60分钟快速入门
- 快速入门系列零：玛德界面库的来由、窗口、皮肤、项目管理等基本概念
- Vue.js——60分钟组件快速入门（上篇）
- Vue.js——60分钟快速入门【1】
- Sencha Touch 2 快速入门系列--索引
- 数论快速入门（同余、扩展欧几里德、中国剩余定理、大素数测定和整数分解、素数三种筛法、欧拉函数以及各种模板）
- webService快速入门入门系列《4》----cfx框架之系统拦截器
- Gradle学习系列之一——Gradle快速入门
- Zend Framework2.*实践系列之一 : 快速入门