11 changed files with 540 additions and 272 deletions
File diff suppressed because it is too large
@ -0,0 +1,3 @@ |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
} |
|||
|
Before Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -1,59 +0,0 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
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> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped lang="less"> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<style lang="less" scoped> |
|||
.svg-icon{ |
|||
width:1em; |
|||
height:1em; |
|||
vertical-align: -0.15em; |
|||
fill:currentColor; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
<template> |
|||
<svg class="svg-icon" aria-hidden="true" > |
|||
<use :xlink:href="iconName" :fill="color"/> |
|||
</svg> |
|||
</template> |
|||
<script> |
|||
import { computed, defineComponent } from 'vue' |
|||
|
|||
const req=require.context('@/assets/svg',false, /\.svg$/) |
|||
const requireAll=requireContext => requireContext.keys().map(requireContext) |
|||
requireAll(req) |
|||
|
|||
export default defineComponent({ |
|||
name:"SvgIcon", |
|||
props:{ |
|||
iconClass:{ |
|||
type:String, |
|||
required:true, |
|||
}, |
|||
color:{ |
|||
type:String, |
|||
default:"" |
|||
}, |
|||
}, |
|||
install(Vue,opt){ |
|||
Vue.component(this.name,this) |
|||
}, |
|||
setup(props,ctx) { |
|||
return{ |
|||
iconName:computed(()=>`#icon-${props.iconClass}`), |
|||
} |
|||
}, |
|||
}) |
|||
</script> |
|||
@ -1,18 +1,12 @@ |
|||
<template> |
|||
<div class="home"> |
|||
<img alt="Vue logo" src="../assets/logo.png"> |
|||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|||
<svg-icon iconClass="atm"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// @ is an alias to /src |
|||
import HelloWorld from '@/components/HelloWorld.vue' |
|||
|
|||
export default { |
|||
name: 'Home', |
|||
components: { |
|||
HelloWorld |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,63 @@ |
|||
const path = require("path"); |
|||
let resolve=dir=>path.join(__dirname,dir) |
|||
|
|||
const isProduction = process.env.NODE_ENV === "production"; |
|||
|
|||
module.exports = { |
|||
publicPath:"./", |
|||
productionSourceMap:false, |
|||
lintOnSave: false, |
|||
filenameHashing: !isProduction, |
|||
// outputDir:"",
|
|||
pages: { |
|||
index: { |
|||
entry: 'src/main.js', |
|||
template: 'public/index.html', |
|||
filename: 'index.html' |
|||
}, |
|||
}, |
|||
configureWebpack:{ |
|||
devtool: "source-map"//isProduction ? false : "source-map",
|
|||
}, |
|||
devServer: { |
|||
port: process.env.PORT||8899, // 服务端口 默认8899
|
|||
https: false, // 是否使用https
|
|||
open: true, // 是否打开游览器
|
|||
// proxy: { // 跨域代理
|
|||
// '/api': {
|
|||
// target: loadEnv(mode, process.cwd()).VITE_APP_API,
|
|||
// changeOrigin: true,
|
|||
// rewrite: (path) => path.replace(/^\/api/, '')
|
|||
// }
|
|||
// }
|
|||
}, |
|||
// 扩展 webpack 配置，使 packages 加入编译
|
|||
chainWebpack: config => { |
|||
// config.module
|
|||
// .rule('js')
|
|||
// .include
|
|||
// .add('/packages')
|
|||
// .end()
|
|||
// .use('babel')
|
|||
// .loader('babel-loader')
|
|||
// .tap(options => {
|
|||
// return options
|
|||
// })
|
|||
//自定义图片
|
|||
config.module.rule("images").use('url-loader').tap(options=>({ |
|||
name:`./img/[hash]_[name].[ext]`, |
|||
quality:85, |
|||
limit: 0, |
|||
exModule:false, |
|||
}) ) |
|||
//svg
|
|||
config.module.rule("svg").exclude.add(resolve('src/assets/svg')).end() |
|||
config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/svg')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId:'icon-[name]'}).end() |
|||
|
|||
config.optimization.splitChunks(false); |
|||
// config.optimization.minimize(false);//不压缩代码
|
|||
|
|||
config.resolve.alias |
|||
.set("@", path.join(__dirname, 'src')) |
|||
} |
|||
} |
|||
Loading…
Reference in new issue