项目建立流程
- 项目文件夹终端
vue ui
可视化新建项目(需要一些时间) - vscode打开项目
npm run serve
运行
架构理解:
- 首先打开的页面默认是
index.html
index.html
默认引用main.js
main.js
引用需要的页面,默认App.vue
。Vue示例挂载- 可以在
view
和component
里创建组件或页面- view中文件以
.vue
结尾,包括三部分:- template:写html内容
- script:控制模板当中数据来源和行为
- style:略
- view中文件以
首先实现在App.vue中引用另一个自建页面(使用element实现)
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div>
<element-view></element-view>
<h1>{{message}}</h1>
</div>
</template>
<script>
import ElementView from './views/element/ElementView.vue'
export default {
components: {ElementView},
data(){
return {
message: "I'm Lzy"
}
},
methods:{
}
}
</script>
views/element/ElementView.vue
<template>
<div>
<el-button type="primary">主要按钮</el-button>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
下一步,通过导航栏实现页面切换
路由(router):URL中哈希(#)与组件的对应关系。
步骤1:配置路由router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/part1', //哈希匹配网址
name: 'part1', //起个名字
component: () => import('../views/element/ElementView.vue') //对应页面
},
{
path: '/part2',
name: 'part2',
component: () => import('../views/element/PartTwo')
},
{ //默认第一次访问是'/',需要把这个位置重定向到有效页面。不加这个会出bug。
path: '/',
redirect: '/part1'
}
]
const router = new VueRouter({
routes
})
export default router
同时在对应路径新建对应.vue
页面part2
最后修改App.vue(不动的元素放这里,需要切换的部分用标签代替表示即可)
<template>
<div id="app">
<!-- element布局 -->
<el-container>
<!-- 头部栏 -->
<el-header style="margin:0px;height: 80px">
<h1 style="line-height: 40px; font-weight: blod; font-size: 30px; text-align:center">
{{ message }}
</h1>
</el-header>
<!-- 主体栏 -->
<el-main>
<!-- 导航栏 -->
<el-menu
router
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="/part1"> 板块一</el-menu-item>
<el-menu-item index="/part2"> 板块二</el-menu-item>
<el-menu-item index="/part3"> 板块三</el-menu-item>
</el-menu>
<router-view></router-view>
<element-view></element-view>
</el-main>
</el-container>
</div>
</template>
<script>
// import ElementView from './views/element/ElementView.vue'
export default {
// components: {ElementView},
data(){
return {
message: "System name"
}
},
methods:{
}
}
</script>
<style>
.el-menu {
display: flex;
justify-content: space-evenly;
}
.el-menu-item {
width: 33%;
text-align: center;
font-size: 18px !important;
}
</style>
之后改进:
使用part1完成静态数据的展示
使用part2完成特定种类数据的展示
之后搭建后端,完成数据交换。
展示特定数据
为了异步数据加载:npm install axios
- 写钩子函数:mounted()
- 通过axios获取数据
- 渲染数据
目前需要先完成后端Django的搭建