Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
21949410 by 刘远
Options

东川项目前端vue基础框子

1 parent f53b16d4
Inline Side-by-side
Showing 16 changed files with 168 additions and 126 deletions
......@@ -5,7 +5,7 @@ module.exports = {
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
// 'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
......
......@@ -9,6 +9,8 @@
},
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^4.8.0",
"element-ui": "^2.13.2",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
......
/**
* @file commons
* Created by He 2020/07/22
* @brief 通用方法
* @author liuyuan
*/
export default {
/**
* @brief 依次打印出来， 正式版本要去的掉
* @param {...any} args (1,2,3)
*/
log(...args) {
args.forEach(val => {
console.log(val);
});
},
/**
* @param {*} fmt '2020-07-22'
* @param {*} date new Date()
*/
dateZhuan(fmt, date) {
//日期格式转换
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
/**
* @brief 纯数组去重
* @param {*} arr [1, 1, 33, 33, 2]
*/
unique: function (arr) {
var newArr = [];
var len = arr.length
for (var i = 0; i < len; i++) {
if (arr.indexOf(arr[i]) == i) {
newArr.push(arr[i]);
}
}
return newArr;
},
/**
* @brief:深度拷贝
* @param {*} year => obj
* */
deepClone: function (data) {
var type = this.getType(data);
var obj;
if (type === 'array') {
obj = [];
} else if (type === 'object') {
obj = {};
} else {
//不再具有下一层次
return data;
}
if (type === 'array') {
for (var i = 0, len = data.length; i < len; i++) {
obj.push(this.deepClone(data[i]));
}
} else if (type === 'object') {
for (var key in data) {
obj[key] = this.deepClone(data[key]);
}
}
return obj;
},
}
\ No newline at end of file
<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>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</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>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
/**
* @file commons
* Created by He 2020/07/22
* @brief 通用配置
* @author liuyuan
*/
export default {
url: '',
}
\ No newline at end of file
......@@ -3,6 +3,19 @@ import App from './App.vue'
import router from './router'
import store from './store'
import echarts from 'echarts'
import config from './config';
import commons from './commons/commons';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.prototype.$echarts = echarts;
Vue.prototype.config = config;
Vue.prototype.commons = commons;
Vue.config.productionTip = false
new Vue({
......
......@@ -4,21 +4,11 @@ import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
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 routes = [{
path: '/',
name: 'Home',
component: Home
}, ]
const router = new VueRouter({
mode: 'history',
......
export default {
}
\ No newline at end of file
export default {
}
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import demo from './storeModules/demo' // 页面分组例子
import actions from './actions'
import mutations from './mutations'
import state from './state'
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
Vue.use(Vuex);
export default new Vuex.Store({
state, //依此加入到store对象中
mutations,
actions,
modules: {
demo,
}
})
\ No newline at end of file
......
import constant from './constant'
export default{
}
\ No newline at end of file
export default {
}
\ No newline at end of file
/**
* @file demo 文件夹名称，命名需和页面一一对应
* Created by He 2020/07/22
* @brief store 分组 示例
* @author liuyuan
*/
// 方法名 一定要备注清楚 一定要备注清楚方法实现的内容！！！
// const CHANGE_LOAIDNG_TYPE = 'CHANGE_LOAIDNG_TYPE';
export default {
state: {
},
actions: {
},
mutations: {
}
};
\ No newline at end of file
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div class="home">
<el-button type="primary">首页</el-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {},
data() {
return {
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
}
}
}
</script>
\ No newline at end of file
......