郑州最近新闻事件,seo编辑培训,大学生网站建设规划书,建设证件查询官方网站本篇文章中的图片均为深色背景#xff0c;请于深色模式下观看 说明#xff1a;本篇文章的内容为vue前端的开发记录#xff0c;作者在这方面的底蕴有限#xff0c;所以仅作为参考 文章目录 一、安装配置nodejs,vue二、vue项目目录结构三、前期注意事项0、组件1、数不清的报…本篇文章中的图片均为深色背景请于深色模式下观看 说明本篇文章的内容为vue前端的开发记录作者在这方面的底蕴有限所以仅作为参考 文章目录 一、安装配置nodejs,vue二、vue项目目录结构三、前期注意事项0、组件1、数不清的报错2什么是前后端分离开发3vue文件结构 三、router 一、安装配置nodejs,vue
这些都是基础的东西建议去其他作者的帖子里看怎么安装配置很简单的这里就不再赘述了。
二、vue项目目录结构
这里我们使用vscode的是编译器这个我用得惯 项目目录结构如下
三、前期注意事项
0、组件
.vue文件一般被叫做组件
1、数不清的报错
请在vue.config.js文件中加入一句
lintOnSave: false,结果如图所示
2什么是前后端分离开发
在我看来前后端分离开发也就是用vue进行前端开发。为什么这么说呢我接触到的Vue项目在运行时是单独在服务器上跑的后端项目也是单独在一个服务器上跑的。此时此刻我在修改前端的时候后端不会停止运行同样的我在修改后端的时候前端也不会停止运行这就分离开了。
3vue文件结构 template
!-- 这个部分类比于前端的html部分 --
/templatescript
// 这个部分是js脚本部分
/scriptstyle
/* 这个部分是css */
/style三、router
在我看来这是vue中很特别很重要的一个东西。学名路由 在vue项目中我就靠router进行页面跳转进行一些骚操作 router的index.js文件内容如下 这里面父子组件还是很震撼我的在后面的部分会细讲
import { createRouter, createWebHashHistory } from vue-routerconst routes [{//父组件path: /parent,component: () import(/views/parent.vue),children: [{//子组件1path: /childrenHello,component: () import(/components/childrenHello.vue),},],}, {},
]const router createRouter({history: createWebHashHistory(),routes: routes
});export default router父组件
!-- 父组件 --
templateh父组件/hdivrouter-view/router-view/div
/templatescript/scriptstyle/style子组件
templatediv子组件1你好/div
/templatestyle/style父组件中的router-view/router-view作用 访问到子路由时router-view/router-view将在父组件中加载子组件中的内容 效果
访问http://localhost:8081/#/parent 2.访问http://localhost:8081/#/childrenHello
今天就先到此为止了。
