Commit a75e28ab authored by 郭志伟's avatar 郭志伟

"build: 1、vue.config.js配置"

parent 88491fd3
module.exports = {
root: true,
env: {
node: true
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: "babel-eslint"
parser: 'babel-eslint',
},
rules: {}
rules: {},
};
module.exports = {
printWidth: 200,
trailingComma: 'es5',
singleQuote: true,
};
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
presets: ['@vue/cli-plugin-babel/preset'],
};
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"],
"include": ["src"]
}
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@qg/cherry-ui": "^1.1.0",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
......@@ -27,6 +28,7 @@
"less": "^3.0.4",
"less-loader": "^5.0.0",
"prettier": "^1.19.1",
"svg-sprite-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
}
}
......@@ -4,7 +4,7 @@
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<router-view />
</div>
</template>
......
import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon'; // svg component
// register globally
Vue.component('svg-icon', SvgIcon);
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);
<?xml version="1.0" encoding="UTF-8"?>
<svg width="72px" height="73px" viewBox="0 0 72 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>首页</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="72" height="72" rx="14"></rect>
<polygon id="path-3" points="0 0.0438762527 3.16631273 0.0438762527 3.16631273 4.01699063 0 4.01699063"></polygon>
<polygon id="path-5" points="0 0.0248742857 65.9625149 0.0248742857 65.9625149 5.93161714 0 5.93161714"></polygon>
<polygon id="path-7" points="0.0550723404 0.0248657143 3.96502128 0.0248657143 3.96502128 5.93160857 0.0550723404 5.93160857"></polygon>
<polygon id="path-9" points="8.69565217e-06 0.0651130435 5.99226957 0.0651130435 5.99226957 51.999991 8.69565217e-06 51.999991"></polygon>
<polygon id="path-11" points="0.0114342857 0.0680191436 2.96477143 0.0680191436 2.96477143 36 0.0114342857 36"></polygon>
</defs>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-20.000000, -604.664719)" id="Group-23">
<g transform="translate(0.000000, 275.664719)">
<path d="M32,0 L343,0 C360.673112,-3.24649801e-15 375,14.326888 375,32 L375,1051 L0,1051 L0,32 C-2.164332e-15,14.326888 14.326888,3.24649801e-15 32,0 Z" id="矩形" fill="#FFFFFF"></path>
<g id="重疾险" transform="translate(20.000000, 329.745024)">
<g id="Group-26-Copy-4">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#FE751A" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group-26" mask="url(#mask-2)">
<g transform="translate(13.000000, 3.000000)">
<g id="Group-27" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(25.000000, 0.000000)">
<path d="M7.80392157,12.0392157 C7.36030087,12.0392157 7,11.4392783 7,10.6993991 L7,5.33981656 C7,4.59998261 7.36030087,4 7.80392157,4 C8.24816434,4 8.60784314,4.59998261 8.60784314,5.33981656 L8.60784314,10.6993991 C8.60784314,11.4392783 8.24816434,12.0392157 7.80392157,12.0392157" id="Fill-1" fill="#FF9148" fill-rule="nonzero"></path>
<g id="Group-5" transform="translate(0.000000, 2.823529)" fill="#EF6B14">
<path d="M2.39116005,4.0170085 C1.62316998,4.0170085 1.34561979e-05,3.12746928 1.34561979e-05,2.03033965 C1.34561979e-05,0.933433333 1.62316998,0.0438941176 2.39116005,0.0438941176 L20.4773217,0.0438941176 C21.2460743,0.0438941176 21.8685132,0.933433333 21.8685132,2.03033965 C21.8685132,3.12746928 21.2460743,4.0170085 20.4773217,4.0170085 L2.39116005,4.0170085 Z" id="Fill-3"></path>
</g>
<g id="Group-8" transform="translate(1.000000, 2.823529)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-7"></g>
</g>
<g id="Group-11" transform="translate(18.686275, 0.000000)" fill="#EF6B14">
<path d="M1.59448528,70.9999955 C0.720482166,70.9999955 0.0112957361,69.4628306 0.0112957361,67.5662913 L0.0112957361,3.4691141 C0.0112957361,1.57249757 0.720482166,0.0350238043 1.59448528,0.0350238043 C2.46930507,0.0350238043 3.17762378,1.57249757 3.17762378,3.4691141 L3.17762378,67.5662913 C3.17762378,69.4628306 2.46930507,70.9999955 1.59448528,70.9999955" id="Fill-9"></path>
</g>
<path d="M9.75632791,41.9389651 C9.50247665,41.9389651 9.29692512,41.719825 9.29692512,41.4496153 L9.29692512,29.4041003 C9.29692512,28.9992828 8.98828677,28.6701467 8.60784314,28.6701467 C7.72120774,28.6701467 7,27.9017365 7,26.9574463 L7,25.4894444 C7,25.2190454 7.20555154,25 7.4594028,25 C7.71325406,25 7.91880559,25.2190454 7.91880559,25.4894444 L7.91880559,26.9574463 C7.91880559,27.3621218 8.22815488,27.6914472 8.60784314,27.6914472 C9.4941675,27.6914472 10.2156863,28.4598101 10.2156863,29.4041003 L10.2156863,41.4496153" id="Fill-15" fill="#FF9148" fill-rule="nonzero"></path>
<rect id="Rectangle" fill="#FF9148" fill-rule="nonzero" x="2" y="11" width="11" height="14" rx="2"></rect>
<rect id="Rectangle" fill="#FF9148" fill-rule="nonzero" transform="translate(7.500000, 25.500000) scale(1, -1) translate(-7.500000, -25.500000) " x="6" y="25" width="3" height="1" rx="0.5"></rect>
<path d="M11.4509804,18.0980392 L11.4509804,23.2565775 C11.4509804,23.5155273 11.2511912,23.7254902 11.0044029,23.7254902 L3.8583854,23.7254902 C3.61159712,23.7254902 3.41176471,23.5155273 3.41176471,23.2565775 L3.41176471,18.0980392 L11.4509804,18.0980392 Z" id="Fill-23" fill="#FF9F5F" fill-rule="nonzero"></path>
</g>
<g id="Group-32" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(0.000000, 21.000000)">
<g id="Group-3" transform="translate(0.000000, 31.000000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<g id="Clip-2"></g>
<path d="M65.8491116,5.93161714 L0.113385083,5.93161714 C0.050758011,5.93161714 -1.82320442e-05,5.88387429 -1.82320442e-05,5.82498857 L-1.82320442e-05,0.131588571 C-1.82320442e-05,0.0726171429 0.050758011,0.0248742857 0.113385083,0.0248742857 L65.8491116,0.0248742857 C65.9117387,0.0248742857 65.9625149,0.0726171429 65.9625149,0.131502857 L65.9625149,5.82498857 C65.9625149,5.88387429 65.9117387,5.93161714 65.8491116,5.93161714" id="Fill-1" fill="#EF6B14" mask="url(#mask-6)"></path>
</g>
<g id="Group-6" transform="translate(62.000000, 31.000000)">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="Clip-5"></g>
<path d="M2.98758298,0.0248657143 L0.0550723404,0.0248657143 C0.595242553,0.0248657143 1.03260426,0.46578 1.03260426,1.00938 L1.03260426,4.94718 C1.03260426,5.49086571 0.595242553,5.93160857 0.0550723404,5.93160857 L2.98758298,5.93160857 C3.52775319,5.93160857 3.96502979,5.49086571 3.96502979,4.94718 L3.96502979,1.00938 C3.96502979,0.46578 3.52775319,0.0248657143 2.98758298,0.0248657143" id="Fill-4" fill="#B0BEC5" mask="url(#mask-8)"></path>
</g>
<path d="M0.999956467,37 L4,37 C3.44739019,37 2.99995647,36.5522115 2.99995647,36.000029 L2.99995647,32.000058 C2.99995647,31.4478756 3.44739019,31 4,31 L0.999956467,31 C0.447346654,31 0,31.4478756 0,32.000058 L0,36.000029 C0,36.5522115 0.447346654,37 0.999956467,37" id="Fill-7" fill="#ECEFF1"></path>
<g id="Group-11">
<mask id="mask-10" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<g id="Clip-10"></g>
<path d="M2.0000087,0.17760487 L3.99226957,0.17760487 C5.09683906,0.17760487 5.99226957,1.07303537 5.99226957,2.17760487 L5.99226957,51.8874901 C5.99226957,51.9496188 5.94383478,51.999991 5.88409565,51.999991 L0.108182609,51.999991 C0.0484434783,51.999991 8.69565217e-06,51.9496188 8.69565217e-06,51.8874901 L8.69565217e-06,2.17760487 C8.69565217e-06,1.07303537 0.895439196,0.17760487 2.0000087,0.17760487 Z" id="Fill-9" fill="#EF6B14" mask="url(#mask-10)"></path>
</g>
<path d="M60,51.8869804 L60,16.1130196 C60,16.0506044 60.0484973,16 60.1084007,16 L65.8916864,16 C65.9515027,16 66,16.0506044 66,16.1130196 L66,51.8869804 C66,51.9493956 65.9515027,52 65.8916864,52 L60.1083136,52 C60.0484973,52 60,51.9493956 60,51.8869804" id="Fill-12" fill="#FF9D5C"></path>
<g id="Group-16" transform="translate(63.000000, 16.000000)">
<mask id="mask-12" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<g id="Clip-15"></g>
</g>
<path d="M6.28679321,21 C6.12841625,21 6,21.1212823 6,21.2707738 L6,30.7292262 C6,30.8788048 6.12841625,31 6.28679321,31 L59.713299,31 C59.8715838,31 60,30.8787177 60,30.7292262 L60,21.2707738 C60,21.1711128 59.904433,21.0808549 59.713299,21 L6.28679321,21 Z" id="Fill-20" fill="#FF9F5F" fill-rule="nonzero"></path>
</g>
<rect id="Rectangle" fill="#FDB483" fill-rule="nonzero" x="6" y="33" width="23" height="10" rx="3"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>编组 24备份 4</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-59.000000, -1076.664719)" id="Group-7">
<g transform="translate(20.000000, 966.664719)">
<g id="Group-4" transform="translate(20.000000, 102.000000)">
<g id="编组-24备份-4" transform="translate(19.000000, 4.000000)">
<g id="Group-9" transform="translate(0.000000, 4.000000)">
<g id="编组-23" transform="translate(1.000000, 1.000000)">
<rect id="矩形" x="0" y="0" width="14" height="14"></rect>
<g id="编组-3" transform="translate(0.000000, 1.500000)" stroke-width="1.5">
<g id="编组-19">
<g id="编组-22">
<path d="M4.39768202,3.58341277 L6.11148483,0.934803283 C6.40892249,0.481565259 6.79134187,0 7.68365712,0 C8.36351416,0 8.74593353,0.325764901 8.94421965,0.594874199 C9.53909385,1.43053159 9.26998455,2.87522171 8.9158923,3.97999633 L11.7061323,3.97999633 C12.1310431,3.97999633 12.5276255,4.16412392 12.796736,4.48988882 C13.0367405,4.78241497 13.135238,5.16603506 13.0658464,5.53800105 L12.2585162,9.46134178 C11.9752427,10.7219043 11.1112581,11.557564 10.0914731,11.557564 L3.94444444,11.3799002" id="路径" stroke="#222729" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2.41192952,2.97222222 C2.02919562,2.97222222 1.70785943,3.26040998 1.66635289,3.64088659 L0.926958952,10.4186644 C0.924012218,10.4456761 0.922535585,10.472828 0.922535585,10.5 C0.922535585,10.9142136 1.25832202,11.25 1.67253558,11.25 L3.33333333,11.25 C3.7475469,11.25 4.08333333,10.9142136 4.08333333,10.5 L4.08333333,3.72222222 C4.08333333,3.30800866 3.7475469,2.97222222 3.33333333,2.97222222 L2.41192952,2.97222222 Z" id="矩形" stroke="#25262A"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -2,7 +2,7 @@
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
......
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true,
},
className: {
type: String,
default: '',
},
},
computed: {
iconName() {
return `#icon-${this.iconClass}`;
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className;
} else {
return 'svg-icon';
}
},
},
};
</script>
<style scoped>
.svg-icon {
width: 5em;
height: 5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
......@@ -2,11 +2,12 @@ import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '@/assets/icons/index.js';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
render: h => h(App),
}).$mount('#app');
......@@ -4,12 +4,8 @@ import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
},
state: {},
mutations: {},
actions: {},
modules: {},
});
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<svg-icon icon-class="index" />
<svg-icon icon-class="ok" />
</div>
</template>
......
const path = require("path");
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
const IS_PROD = process.env.NODE_ENV === 'production';
......@@ -8,15 +8,54 @@ module.exports = {
config.resolve.symlinks(true);
// 移除 prefetch 插件(针对生产环境首屏请求数进行优化)
config.plugins.delete('prefetch')
config.plugins.delete('prefetch');
// 移除 preload 插件(针对生产环境首屏请求数进行优化) preload 插件的用途:https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
config.plugins.delete('preload')
config.plugins.delete('preload');
// 添加别名
config.resolve.alias
.set("@", resolve("src"))
config.resolve.alias.set('@', resolve('src'));
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end();
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
.end();
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial', // only package third parties that are initially dependent
},
cherryUI: {
name: 'chunk-cherryUI', // split cherryUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?cherry-ui(.*)/, // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true,
},
},
});
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single');
return config;
},
lintOnSave: true,
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment