1. オンデマンドで要素を導入する
1.要素のインストール
npm i element-ui -S
2. オンデマンドの導入
babel-plugin-component を使用すると、プロジェクトのサイズを削減するために必要なコンポーネントのみを導入できます。
element-ui公式サイト https://element.eleme.cn/#/zh-CN/component/quickstart
最初に babel-plugin-component をインストールします。
npm install babel-plugin-component -D
次に、.babelrc を次のように変更します。
なお、.babelrc ファイルが見つからない場合は、babel.config.js ファイルを見つけることができます。初期ファイルはこのようになっています。
ドキュメントに従って修正してください。
module.exports = {
presets: [
"@vue/cli-plugin-babel/preset",
["es2015", {
"modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};
新しい element.js ファイルを作成します。コンポーネント フォルダーに作成しました。
import Vue from "vue";
import {
Button } from 'element-ui';
const list = [
Button
]
//循环注册组件
list.forEach(ele => {
Vue.use(ele)
})
続いて main.js に導入します
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// 全局引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
// 按需引入
import "@/components/Element.js";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
公式サイトに従って操作を完了するとエラーが報告されますが、その原因はこちらです、
修正版です。
module.exports = {
presets: [
"@vue/cli-plugin-babel/preset",
["@babel/preset-env", {
"modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};
新しい vant.js ファイルを作成します。コンポーネント フォルダーに作成しました。
2. Vant オンデマンドの導入
1.Vantのインストール
npm i vant -S
2. オンデマンドでインポート:
babel プラグインである babel-plugin-import を使用してオンデマンドでインポートすると、コンパイル プロセス中にインポートの記述がオンデマンド インポートに自動的に変換されます。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
# 安装插件
npm i babel-plugin-import -D
これは、babel.config.js ファイルでも構成されます。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}, "vant"
],
]
};
新しい vant.js ファイルを作成します。コンポーネント フォルダーに作成しました。
import Vue from "vue";
import {
Button } from 'vant';
const list = [
Button
]
//循环注册组件
list.forEach(ele => {
Vue.use(ele)
})
続いて main.js に導入します
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// 全局引入
//import Vant from 'vant';
//import 'vant/lib/index.css';
//Vue.use(Vant);
// 按需引入
import "@/components/vant.js";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
公式 Web サイトの設定によると、エラーは報告されていません。
3. オンデマンドで Ant-design-vue を導入する
1. Ant-design-vue をインストールします。
インストールした ant-design-vue はバージョン 1.78 です (構成プロセス中に、ant-design のバージョンが高すぎるか、以前のバージョンと少ないローダーのバージョンが一致しないため、エラーが発生します)報告されました、迷惑です）
npm i ant-design-vue@1.7.8 -S
2. オンデマンドでインポート:
babel プラグインである babel-plugin-import を使用してオンデマンドでインポートすると、コンパイル プロセス中にインポートの記述がオンデマンド インポートに自動的に変換されます。
https://2x.antdv.com/docs/vue/getting-started-cn
# 安装插件
npm i babel-plugin-import -D
これは、babel.config.js ファイルでも構成されます。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": true
}
],
]
};
新しい vant.js ファイルを作成します。コンポーネント フォルダーに作成しました。
import Vue from "vue";
import {
Button } from 'ant-design-vue';
const list = [
Button
]
//循环注册组件
list.forEach(ele => {
Vue.use(ele)
})
続いて main.js に導入します
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// 全局引入
//import Antd from 'ant-design-vue';
//import 'ant-design-vue/dist/antd.css';
//Vue.use(Antd);
// 按需引入
import "@/components/Antd.js";
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
その後、再びエラーが発生しました。
解決策は、「style」を「css」に変更することでした。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": "css"
}
],
]
};
しかし、私は非常に頑固な人間なので、 "style": true; が欲しい
ので、エラーを解決しましょう. ant-design-vue は、less を通して書かれているため、エラーは、less によるものです。
インストールするローダーの数も少なくなります
安装 less : npm i less --save-dev
安装 less-loader : npm i less-loader --save-dev
私のインストールされているバージョン
npm i less@4.0.0 --save-dev
npm i less-loader@8.0.0 --save-dev
次に、vue.config.js ファイルで設定します。
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions:{
javascriptEnabled: true,
}
}
}
},
};
よし、普通に走れるぞ！