Skip to content

O
OKR
Commit fe7e898c authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

init

parent c8d084c9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 113 deletions
babel.config.js
View file @ fe7e898c
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant'],
['import', {
libraryName: 'ant-design-vue',
libraryDirectory: "es",
style: true
}, 'ant-design-vue']
]
}
package-lock.json
View file @ fe7e898c
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ fe7e898c
......@@ -8,9 +8,12 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.7.5",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"vant": "^2.12.22",
"vue": "^2.6.11",
"vue-fragment": "^1.5.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
......@@ -18,17 +21,21 @@
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-eslint": "^3.1.1",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/cli-service": "^3.12.1",
"@vue/eslint-config-typescript": "^7.0.0",
"autoprefixer": "^9.8.6",
"babel-plugin-import": "^1.13.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11"
}
......
postcss.config.js 0 → 100644
View file @ fe7e898c
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
\ No newline at end of file
public/index.html
View file @ fe7e898c
......@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="//at.alicdn.com/t/font_2629369_2divej2yde9.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
......
src/App.vue
View file @ fe7e898c
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div class=" text-red-900">dsflsdjf
<app-icon type="png" class=" h-3"></app-icon>
<app-icon name="icon-dianying" color='#BF463D' size='28px'></app-icon>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
components:{
'app-icon':()=>import('./components/common/Icon.vue')
},
name: 'App',
#nav {
padding: 30px;
});
</script>
a {
font-weight: bold;
color: #2c3e50;
<style lang="less">
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
src/assets/icons/shiba.svg 0 → 100644
View file @ fe7e898c
This diff is collapsed.
src/components/HelloWorld.vue deleted 100644 → 0
View file @ c8d084c9
<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-pwa" target="_blank" rel="noopener">pwa</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>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</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 lang="ts">
import Vue from 'vue';
export default Vue.extend({
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>
src/components/common/Btn.vue 0 → 100644
View file @ fe7e898c
<template>
<div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3" :class="getSize && border" @click="eventEmit">
{{text}}
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'AppIcon',
props: {
size: String,
disabled: {
type:Boolean,
default:false
},
text:{
type: String,
required: true
},
border:{
type: String,
default:'border border-app-dark-4'
}
},
methods:{
eventEmit(v:any){
if(this.disabled){
return
}
this.$emit('btnClicked',v)
}
},
computed:{
getSize(){
switch (this.size) {
case 'full':
return 'w-full'
default:
return 'w-20';
}
}
}
});
</script>
src/components/common/Cell.vue 0 → 100644
View file @ fe7e898c
<template>
<div class="cell flex justify-between py-3 border-t border-b border-app-dark-3 px-2">
<div class="left">hahah</div>
<div class="right">
<Switch default-checked />
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Switch } from 'ant-design-vue'
// Vue.use(Switch)
export default Vue.extend({
components:{ Switch},
props: {
size: String,
type: {
type:String,
default:'select'
},
disabled:{
type:Boolean,
default:false
},
text:{
type: String,
required: true
},
theme:{
type: String,
default:'default'
}
},
methods:{
eventEmit(v:any){
if(this.disabled){
return
}
this.$emit('btnClicked',v)
}
},
computed:{
getSize(){
switch (this.size) {
case 'full':
return 'w-full'
default:
return 'w-20';
}
}
}
});
</script>
src/components/common/Icon.vue 0 → 100644
View file @ fe7e898c
<template>
<fragment>
<div v-if="type==='png'" class=" w-12 ">
<img src="@/assets/icons/shiba.png" class="object-cover object-center " >
</div>
<svg aria-hidden="true" :height="size" :width="size" :fill="color">
<use :xlink:href="'#'+name" ></use>
</svg>
</fragment>
</template>
<script lang="ts">
import Vue,{Component} from 'vue';
import { Plugin } from 'vue-fragment'
Vue.use(Plugin)
export default Vue.extend({
props: {
type: {
type:String,
default:'svg'
},
size:{
type:String,
default:'14px'
},
color:{
type:String,
default:'#000000'
},
name:{
type:String,
default:'icon-anquanzhongxin89'
}
}
});
</script>
src/components/common/Option.vue 0 → 100644
View file @ fe7e898c
<template>
<div class="options py-3">
<div class="flex justify-between">
<div class="inpu-title">选项管理</div>
<div class=" text-xs text-app-red"></div>
</div>
<div class="option-items">
<div class="option-item flex" v-for="(i,index) in value" :key="index">
<div @click="deleteClicked(i,index)">
<app-icon customize type='icon-delete-s' size='24px' color='#BF463D' ></app-icon>
</div>
<div class="pl-3">
<textarea v-model="value[index]" type="text" placeholder="请输入" maxlength="500" rows="2" cols="50" class="w-full text-sm py-2 px-3 mt-2 rounded text-app-blue-1" />
</div>
</div>
</div>
<div class="flex mt-5 justify-center gap-x-1">
<div class='self-start'>
<app-icon customize type='icon-tianjia' size='20px' color='#BF463D' ></app-icon>
</div>
<div class='leading-6' @click="addOption">添加选项</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
// import {remove as _remove} from 'lodash'
export default Vue.extend({
components:{
'app-icon':()=>import('@/components/common/Icon.vue'),
},
data(){
return{
value:['',''] as string[]
}
},
methods:{
deleteClicked(item:any,Click_index:any){
if(this.value.length>2){
this.value.splice(Click_index,1)
}else{
this.$toast.fail('选项不能少于两个')
}
},
addOption(){
this.value.push('')
}
}
});
</script>
src/components/common/Pagination.vue 0 → 100644
View file @ fe7e898c
<template>
<div class="w-full flex items-center justify-center mt-6">
<div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)">
首页
</div>
<van-pagination class="mb-0" v-model="page" :page-count="totalPage" @change="handleChange">
<template #prev-text>
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow" />
</template>
</van-pagination>
<div class="page-btn text-center text-xs rounded-r-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(totalPage)">
尾页
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Pagination, Icon } from 'vant'
Vue.use(Pagination)
Vue.use(Icon)
export default Vue.extend({
props: {
currentPage: {
type: Number,
default: 1
},
totalPage: {
type: Number,
default: 5
}
},
computed: {
page: {
get: function() {
return this.currentPage
},
set: function() {
}
}
},
methods: {
handleChange(v: number) {
console.log(v)
this.$emit('handleChange', v)
},
goPage(v: number) {
this.handleChange(v)
}
}
})
</script>
<style scoped>
>>> .van-pagination__item {
min-width: 32px;
height: 36px;
background: #1A0270;
color: #fff;
border: 1px solid #35379F;
border-right: none;
font-size: 12px;
flex-grow: 0
}
>>> .van-pagination__item--active {
background: #0B0A44;
color: #FFBB00;
}
>>> [class*=van-hairline]::after {
border-color: #35379F
}
</style>
\ No newline at end of file
src/components/common/Picker.vue 0 → 100644
View file @ fe7e898c
<template>
<div v-if="show" class="fixed bottom-0 left-0 w-full">
<van-picker
show-toolbar
title="Title"
:columns="columns"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { Picker } from 'vant';
Vue.use(Picker);
export default Vue.extend({
data() {
return {
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
show:false
};
},
methods:{
onConfirm() {
console.log(1);
},
onChange() {
console.log(2);
},
onCancel() {
console.log(3);
},
}
});
</script>
src/components/common/Search.vue 0 → 100644
View file @ fe7e898c
<template>
<div class='search flex items-center bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
<div class='search-input flex-grow'>
<input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
</div>
<app-icon size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
</div>
</template>
<script lang="ts">
import Vue,{Component} from 'vue';
import { Icon } from 'ant-design-vue';
Vue.use(Icon)
const AppIcon = Icon.createFromIconfontCN({
scriptUrl:'/iconfont.js' // generated by iconfont.cn
});
export default Vue.extend({
props: {
},
components:{
'app-icon':AppIcon as Component
}
});
</script>
src/views/Home.vue → src/components/common/Title.vue
View file @ fe7e898c
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
<div class="text-lg">
{{text}}
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default Vue.extend({
name: 'Home',
components: {
HelloWorld,
name: 'Title',
props: {
text:{
type: String,
required: true
}
},
});
</script>
src/main.ts
View file @ fe7e898c
......@@ -3,7 +3,8 @@ import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import "tailwindcss/tailwind.css"
import './style.less'
Vue.config.productionTip = false
new Vue({
......
src/router/index.ts
View file @ fe7e898c
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import App from '../App.vue'
Vue.use(VueRouter)
......@@ -8,16 +8,9 @@ const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: Home
component: App
},
{
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({
......
src/views/About.vue deleted 100644 → 0
View file @ c8d084c9
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
tailwind.config.js 0 → 100644
View file @ fe7e898c
This diff is collapsed.
vue.config.js 0 → 100644
View file @ fe7e898c
module.exports = {
// ...other vue-cli plugin options...
css: {
loaderOptions: {
less: {
javascriptEnabled: true, // 加载LESS 需要把JS设置一下
}
}
},
// pwa: {
// name: 'My App',
// themeColor: '#4DBA87',
// msTileColor: '#000000',
// appleMobileWebAppCapable: 'yes',
// appleMobileWebAppStatusBarStyle: 'black',
// manifestOptions:{
// display: 'standalone',
// theme_color: '#333333'
// },
// // configure the workbox plugin
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {
// // swSrc is required in InjectManifest mode.
// swSrc: 'dev/sw.js',
// // ...other Workbox options...
// }
// }
}
\ No newline at end of file
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