wordpress 导购站模板,h5网站开发流程图,服装培训网站建设,网站建设推广书籍本文是专栏《手把手带你做一套毕业设计毕业设计》的实战第一篇#xff0c;将从Vue脚手架安装开始#xff0c;逐步带你搭建起一套管理系统所需的架构。当然#xff0c;在默认安装完成之后#xff0c;会对文件目录进行初步的细化拆分#xff0c;以便后续功能迭代和维护所用。…
本文是专栏《手把手带你做一套毕业设计毕业设计》的实战第一篇将从Vue脚手架安装开始逐步带你搭建起一套管理系统所需的架构。当然在默认安装完成之后会对文件目录进行初步的细化拆分以便后续功能迭代和维护所用。 为兼顾大多数计算机毕设的需求我们将多个往届和本届毕业生的毕设需求进行了整改为了便于理解和实战入手本专栏以开发一套“校园图书借阅系统”为例包含管理员平台和学生借阅网站。 本专栏目前进展目录
手把手带你做一套毕业设计毕业设计-前端1 手把手带你做一套毕业设计-征程开启2 我应该把毕业设计做到什么程度才能过关3 做毕业设计前端部分你需要掌握的6个核心技能手把手带你做一套毕业设计毕业设计-服务端1 基于SpringBootSpringCloudVue前后端分离项目实战 --开篇
目录
一、 脚手架的正确安装姿势
1. 开发工具推荐使用vscode
2. 新建代码库用vscode打开空项目
3. 打开控制台的2种方式
4. Node和npm的检查
5. 安装稳定版本vue
6. Vue-cli脚手架
7. 基于webpack创建一个新项目
8. 安装完成
9. 进入项目目录启动Vue空项目
10. 浏览器打开
二、对项目进行高可维护性目录整改
1. 初始化目录的介绍
2. 内聚性与耦合性的功能目录模块
3. views目录迁移代码修改 一、 脚手架的正确安装姿势 1. 开发工具推荐使用vscode
首先推荐开发工具Visual Studio Code也就是人们常说的vscode。目前vscode在日常开发工作中很常用而且他对于很多我们前端开发所需的插件GIT SVN版本控制工具的支持也非常成熟。打开一个空的vscode界面 2. 新建代码库用vscode打开空项目
我们首先要开发B端管理员系统可以在自己放代码的文件夹下新建一个文件夹起名 book-manager。并用vscode打开空项目如下图所示 3. 打开控制台的2种方式
控制台也就是Terminal如果你的vscode还没有打开Terminal这里有2个入口。第一是左下角的错误提示区域第二是顶部菜单的Terminal。如下图所示不管你的英语水平如何都不建议使用汉化的vscode或者想办法安装汉化包去使其汉化我们更应该不断的练习自己的英语水平哪怕只是从开发工具入手 4. Node和npm的检查 虽然对于初学者的你来说还没必要深入学习node和npm的知识但我们马上就要开始的Vue项目却是基于这两个技术点的。不过不用担心只要熟练使用几个小技术点就可以安心做项目了。 首先需要检查一下自己的node和npm是否安装成功了没有安装的随便去找个教程下一步下一步的安装上node也不需要安装最新版找一个大版本是12的14的都可以不过安装上最新的也没问题。但我本项目开发所用版本为V14.18.1。检查的命令如下图执行
node -v
npm -v5. 安装稳定版本vue
执行命令npm install vue这将是vue项目开发的基石。 6. Vue-cli脚手架
这是Vue所提供的官方命令行工具可用于快速搭建我们所需的单页面应用。需要执行命令注意下面的命令是两个中划线再加global
npm install –global vue-cli 7. 基于webpack创建一个新项目
其实我们也可以自己一点一点的搭建项目所需文件但那会比较原始现在的项目开发有个特点几乎没有哪个技术框架不提供一个初始化模板架构方案的因为那样更快速而且也更加友好。其实说的不厚道点友好不友好另说主要是快速。
执行命令
vue init webpack book-manager 然后就是脚手架所提供的安装询问过程 1 Target directory exists.Continue? 这里询问当前目录是否继续直接回车即可 2 Project name book-manager 这里询问项目名称我们之前文件夹已建好直接回车即可 3 Project description 这里询问对项目的描述比如你可以写这是我的第一个Vue项目不写也行 4 Author 这里询问作者其实写不写都行如果是自己的练手项目真正的企业项目一定要写 5 Install vue-router? 因为我们做的是一个单页面的大型项目所以需要安装路由 6 ESLint unit测试 e2e测试 这个对于我们的毕设项目比较耗时而且暂时用处不大可输入N不安装 8. 安装完成
询问结束后经过一顿猛如虎的下载操作顺利的话会正常安装完成。 9. 进入项目目录启动Vue空项目
安装完成之后即可输入命令cd book-manager然后控制台的命令行目录改变之后执行启动命令npm run dev。启动完成之后可将http://localhost:8080输入到浏览器上 10. 浏览器打开
这里我们首推chrome浏览器输入http://localhost:8080。至此空Vue项目安装完成。 二、对项目进行高可维护性目录整改
1. 初始化目录的介绍 src: 除了项目所需的打包部署所需配置文件除了node_modules项目依赖包除了HTML落地页除了webpack配置等信息基本业务开发所需的内容都会包含在src目录下。 assets: 通过脚手架所创建的这个assets目录是准备存放一些静态资源的例如项目所需的本地图片一些全局样式等 components: 使用Vue开发项目脑子里要一直有组件这个概念一直以来做面向对象开发流传着一句名言叫万物皆对象但到了Vue项目里要谨记你所在浏览器里看见的都是组件。所以脚手架创建的这个目录本来是准备用作页面中组件开发使用的。 router: Vue主要是为了实现单页面应用比如你看见的市面上的成熟网站为了划分业务模块为了减小服务承载压力几乎每看见的一个小页面都是单独的一个项目部署到不同的服务器里。但很多管理员平台还是延续着一个项目通过路由控制不同的页面来实现的这也就是router的使用场景所在。不过对于很多微前端的实现又与这种思路不同微前端我们这里不说哈。 App.vue: 既然Vue讲求单页面应用我们所看见的页面元素都是一个个的子组件或者孙组件总会最外层有一个父组件或者入口组件这就是App.vue的关键地方。他通过嵌套router-view组件来实现路由的入口转发。 main.js: 不管前端发展多少年了最终被打包完的内容无外乎html css js以及一些其他的媒体资源所以我们的浏览器请求到HTML落地页之后如果在js没有加载完成之前页面中就只能是一个干净的div id”app”/div。只有我们所需要的JS CSS加载完成之后才会开始进行DOM树CSS树的组装所以这个main.js就是整个项目的入口js文件可以理解为一个袋子口。 static: 这个static文件夹和assets文件夹是相同性他们都可以存放一些静态的图片和CSS这些东西但也略有不同。例如我们想要引入一个jquery.min.js的第三方文件不想从网络上去下载其他网站的就想放到自己的服务下建议放到这个文件夹下。但对于咱们这个项目用处不是很大下一节可能会被整合掉哦。 index.html: 这就是真正的html页面我们最终会引入CSS 引入JS的那个html页面。 2. 内聚性与耦合性的功能目录模块
虽然安装脚手架所生成的模板目录给我们的开发带来了极大的便捷但如果我们所做的项目一旦内容多起来这些初始化的模板恐怕就不够用了。我们更希望一个大项目中的各个组件之间有一个紧密的联系但也希望每个组件每个方法每个功能都有他自己的责任。
于是我们需要整合一些后续项目所需要的模块添加进来例如 api: 负责将各个大业务模块的请求事件整合起来然后被各自的业务模块引入。而业务模块如果需要发送HTTP请求呢只需要负责组装入参数据和获取数据即可。 assets: 这里真的要存放静态图片和全局的CSS文件了 components: 这里不再是脚手架初始化时存放业务组件目录了我们的后续是项目实战会使用elementUI组件库但为了让大家更加深入理解vue的组件化使用我们会实现一些组件例如弹框分页表格等所以这里存放的是我们自己实现的业务组件。而且有了这些自己实现的组件去和老师汇报面试的时候也更有自己的经验可言。 config: 这个目录用来存放一些静态枚举变量等例如我们多个页面组件可能会公用的一些前端写死的数据变量。 store: 这个目录先存放着vuex的数据管理其实就像一个人戴眼镜如果不近视是不需要戴眼镜的当你真正看不清了就会发现自己该去眼镜店赔一副属于自己的眼镜了。所以这个目录先保留着我们后续渐进使用。 utils: 这里存放一些公共的JS方法例如对日期时间的处理对一些数据的处理对表单验证的处理对axios的封装等。 views: 这里才是我们App.vue的各个业务模块的子组件而不再使用脚手架初始化创建的componentscomponenets目录已经被我们设定为自主实现组件库的目录啦。 3. views目录迁移代码修改
views/HelloWorld.vue
templatediv{{ msg }}/div
/templatescript
export default {name: HelloWorld,data () {return {msg: Vue实战项目即将开始啦}}
}
/scriptrouter/index.js
import Vue from vue
import Router from vue-router
import HelloWorld from /views/HelloWorldVue.use(Router)export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld}]
})为了能够把专栏写好您的声音很重要下面投个票吧
