郑州前端培训机构,seo的中文含义,甜品网页设计模板html,柳州正规网站制作公司项目建立流程
项目文件夹终端vue ui可视化新建项目#xff08;需要一些时间#xff09;vscode打开项目npm run serve运行
架构理解#xff1a;
首先打开的页面默认是index.htmlindex.html默认引用main.jsmain.js引用需要的页面#xff0c;默认App.vue。Vue示例挂载可以在…项目建立流程
项目文件夹终端vue ui可视化新建项目需要一些时间vscode打开项目npm run serve运行
架构理解
首先打开的页面默认是index.htmlindex.html默认引用main.jsmain.js引用需要的页面默认App.vue。Vue示例挂载可以在view和component里创建组件或页面 view中文件以.vue结尾包括三部分 template写html内容script控制模板当中数据来源和行为style略
首先实现在App.vue中引用另一个自建页面使用element实现 main.js
import Vue from vue
import App from ./App.vue
import router from ./routerimport ElementUI from element-ui
import element-ui/lib/theme-chalk/index.cssVue.config.productionTip false
Vue.use(ElementUI);new Vue({router,render: h h(App)
}).$mount(#app)
App.vue
templatedivelement-view/element-viewh1{{message}}/h1/div
/templatescriptimport ElementView from ./views/element/ElementView.vueexport default {components: {ElementView},data(){return {message: Im Lzy}},methods:{}}
/scriptviews/element/ElementView.vue
templatedivel-button typeprimary主要按钮/el-button/div
/templatescript
export default {}
/scriptstyle/style下一步通过导航栏实现页面切换
路由routerURL中哈希#与组件的对应关系。
步骤1配置路由router/index.js
import Vue from vue
import VueRouter from vue-routerVue.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(不动的元素放这里需要切换的部分用标签代替表示即可)
templatediv idapp!-- element布局 --el-container !-- 头部栏 --el-header stylemargin:0px;height: 80pxh1 styleline-height: 40px; font-weight: blod; font-size: 30px; text-align:center{{ message }}/h1/el-header!-- 主体栏 --el-main!-- 导航栏 --el-menurouter:default-active$route.pathclassel-menu-demomodehorizontalbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index/part1 板块一/el-menu-itemel-menu-item index/part2 板块二/el-menu-itemel-menu-item index/part3 板块三/el-menu-item/el-menurouter-view/router-viewelement-view/element-view/el-main/el-container/div
/templatescript// import ElementView from ./views/element/ElementView.vueexport default {// components: {ElementView},data(){return {message: System name}},methods:{}}
/scriptstyle.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的搭建
