1.Vue全家桶学习结合实际项目学习案例如下:
vue.js目录结构如下:
相关目录解析如下:
build:项目构建(webpack)相关代码
如图:
config:配置目录,包括端口号,我们初学可以使用默认的;
node_modules是使用npm安装了相关的npm install(自动生成的默认依赖文件包)
npm加载的项目依赖模块。
扫描二维码关注公众号,回复:
4156837 查看本文章
src这里是我们要开发的目录,基本上所有需要做的事都是在这个文件里面。
该目录文件架构如下:
assets是放置一些图片,如logo,如图所示:
components:目录里面放了一个组建文件,可以不用。
但是这个项目进行使用,进行了组件的控制。
项目结构如图所示:
App.vue:项目入口文件,我们也可以直接将组件写这里,而不使用components目录:
详细代码如下:
<template>
<div id="app" class="wrapper skin-blue">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
created() {
this.$store.dispatch('menu/getCategoryList');
this.$store.dispatch('menu/getBoardList');
this.$store.dispatch('menu/getMenuList')
.then(() => {
//console.log('-----routes----', this.$store.state.menu.routes)
this.$router.addRoutes(this.routes);
this.$router.beforeEach((to, from, next) => {
this.$req.abort();
next();
})
})
.catch(() => {})
},
mounted() {
},
computed: {
routes() {
return this.$store.state.menu.routes;
}
}
}
</script>
<style>
a:hover {
text-decoration: none;
}
body {
font-size: 13px;
}
#app {
/*position: relative;
height: 100%;*/
min-height: 100%;
}
/*公共样式*/
.dashed-box {
border: 2px dashed #d2d6de;
min-height: 200px;
padding: 0;
}
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-active .el-input__inner, .el-input__inner:focus {
/*border-color: #3c8dbc;*/
}
/*配置界面--preview 弹框*/
.preview-config-modal {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.preview-config-modal .el-button--primary{
background-color: #3c8dbc;
border-color: #367fa9;
}
.preview-config-modal .el-button--primary:active,
.preview-config-modal .el-button--primary:hover,
.preview-config-modal .el-button--primary:focus {
background-color: #3c8dbc;
border-color: ##367fa9;
}
/*配置界面--Add Param 弹框*/
.param-config-dialog .el-transfer-panel {
width: 40%;
}
.param-config-dialog .el-transfer__buttons {
width: 20%;
}
@media (max-width: 767px) {
.param-config-dialog .el-transfer-panel,
.param-config-dialog .el-transfer__buttons {
width: 100%;
}
.param-config-dialog .el-transfer__buttons {
margin-top: 10px;
}
}
.param-config-dialog .el-transfer__buttons .el-transfer__button {
margin: 0 auto!important;
margin-bottom: 10px!important;
}
.param-config-dialog .el-transfer-panel__header {
background: #3c8dbc;
}
.param-config-dialog .el-transfer-panel__header .el-checkbox__label,
.param-config-dialog .el-transfer-panel__header .el-checkbox__label > span {
color: #fff!important;
}
.param-config-dialog .el-transfer-panel__body {
height: 300px;
}
.param-config-dialog .el-transfer-panel__list {
height: 248px;
}
.param-config-dialog .el-transfer__button,
.param-config-dialog .el-checkbox__input.is-indeterminate .el-checkbox__inner,
.param-config-dialog .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #3c8dbc;
border-color: #367fa9;
}
.param-config-dialog .el-transfer__button.is-disabled {
background-color: #f5f7fa;
border-color: #dcdfe6;
}
.param-config-dialog .el-checkbox__input.is-checked+.el-checkbox__label,
.param-config-dialog .el-transfer-panel__item:hover {
color: #3c8dbc;
}
.form-group.is-error .board-config--input input {
border-color: #f56c6c!important;
}
/*config-Add Layout--Name 输入框的提示*/
.error-tag {
padding-top: 4px;
line-height: 1;
font-size: 12px;
color: #f56c6c;
}
/*dashboard widget 放大弹出的 Dialog 样式*/
.el-dialog__body .box-body {
min-height: 500px!important;
}
.param-detail-config label {
float: left;
}
/*dashboard 页面--param--DatePicker的样式*/
.dashboard-param .el-date-editor {
width: 100%;
}
/* gridster 布局中的 box 样式*/
.widget-item .box {
margin-bottom: 0!important;
}
.content {
box-sizing: border-box;
}
/*Gridster Layout config: Row BackgroundColor Picker*/
.row-color-picker .el-color-picker__trigger {
width: 30px!important;
height: 30px;
}
/*图表设计页面 -- Filter 框 -- Date Picker 样式调整*/
.filter-param .el-date-editor {
height: 28px;
line-height: 28px;
}
/*数据源管理页面*/
.datasource .el-tree-node__content {
border-bottom: 1px solid #f4f4f4;
padding: 20px 0;
}
.datasource-form label {
margin-bottom: 0;
}
.datasource-form .el-form-item {
margin-bottom: 10px;
}
</style>
main.js:项目的核心文件
详细代码如下:
static;静态资源目录,如图片,字体等:
如图所示:
doc文件可有可无:这个是自定义的
红色框框均是配置文件,如图所示:
index.html:
首页入口文件:
你可以添加一些meta头部信息或者统计代码啥的
package.json是项目有配置文件,如图所示:
着重看一下配置文件用到的一些东西;
dependeices可以看到你所使用的一些技术:
README.md项目的说明文档,markdown格式,如下图所示:
至此基于vue的项目介绍完毕。