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> |
<template> |
||||
<div class="home"> |
<div class="home"> |
||||
<img alt="Vue logo" src="../assets/logo.png"> |
<svg-icon iconClass="atm"/> |
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
// @ is an alias to /src |
|
||||
import HelloWorld from '@/components/HelloWorld.vue' |
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'Home', |
name: 'Home', |
||||
components: { |
|
||||
HelloWorld |
|
||||
} |
|
||||
} |
} |
||||
</script> |
</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