绍兴市建设银行网站,免费建站的网址,做旅游的网站的需求,做淘宝那样的网站麻烦吗目录 YAPI介绍前端工程化之Vue-cli前端工程化简介前端工程化入门——Vue-cli环境准备Vue项目简介创建Vue项目vue项目目录结构介绍vue项目运行方法 Vue项目开发流程 前后台混合开发这种开发模式有如下缺点#xff1a;
沟通成本高#xff1a;后台人员发现前端有问题#xff0… 目录 YAPI介绍前端工程化之Vue-cli前端工程化简介前端工程化入门——Vue-cli环境准备Vue项目简介创建Vue项目vue项目目录结构介绍vue项目运行方法 Vue项目开发流程 前后台混合开发这种开发模式有如下缺点
沟通成本高后台人员发现前端有问题需要找前端人员修改前端修改成功再交给后台人员使
用
分工不明确后台开发人员需要开发后台代码也需要开发部分前端代码。很难培养专业人才
不便管理所有的代码都在一个工程中
不便维护和扩展前端代码更新和后台无关但是需要整个工程包括后台一起重新打包部署。所以我们目前基本都是采用的前后台分离开发方式.前端工程交给专业的前端人员开发后端工程交给专业的后端人员开发。前端页面需要数据可以通过发送异步请求从后台工程获取。前后台统一指定一套规范这就是我们的接口文档。接口文档有离线版和在线版本接口文档示可以查询今天提供资料/接口文档示例里面的资料。其我们后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的。 1. 需求分析首先我们需要阅读需求文档分析需求理解需求。
2. 接口定义查询接口文档中关于需求的接口的定义包括地址参数响应数据类型等等
3. 前后台并行开发各自按照接口文档进行开发实现需求
4. 测试前后台开发完了各自按照接口文档进行测试
5. 前后段联调测试前段工程请求后端工程测试功能YAPI介绍
前后台分离开发中我们前后台开发人员都需要遵循接口文档所以接下来我们介绍一款撰写接口文档 的平台。YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管 理服务。 其官网地址 YAPI
YApi提供了添加项目、添加分类、添加接口等功能 最后我们还可以设置接口的mock信息来让YApi提供一个测试接口设置好接口信息就会自动生成mock地址将来前端程序员在测试的时候就可以直接访问这个地址模拟后端服务器自动生成mock测试数据 前端工程化之Vue-cli
前端工程化简介
当在前端开发中需要使用一些资源时例如vue.js和axios.js文件直接在工程中导入的开发模式存在如下问题
每次开发都是从零开始比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录没有统一的标准不方便维护所以现在企业开发中更加讲究前端工程化方式的开发主要包括如下4个特点
模块化将js和css等做成一个个可复用模块
组件化我们将UI组件css样式js行为封装成一个个的组件便于管理
规范化我们提供一套标准的规范的目录接口和编码规范所有开发人员遵循这套规范
自动化项目的构建测试部署全部都是自动完成说白了就是在企业级的前端项目开发中把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率降低开发难度等等。
前端工程化入门——Vue-cli
环境准备
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能
统一的目录结构
本地调试
热部署
单元测试
集成打包上线运行Vue-cli需要依赖NodeJS我们需要先安装NodeJS然后才能安装Vue-cli。
将nodejs选择安装到一个没有中文没有空格的目录下。安装完毕后会自动配置好环境变量我们在cmd验证一下是否安装成功通过 node -v。 然后配置npm的全局安装路径使用管理员身份运行命令行在命令行中: npm config set prefix “安装路径” 然后使用管理员身份运行命令行下载Vue-cil npm install -g vue/cli
安装完后运行vue --version有版本号代表成功 Vue项目简介
创建Vue项目
Vue-cli提供了如下2种方式创建vue项目:
命令行直接通过命令行方式创建vue项目
vue create vue-project01图形化界面通过命令先进入到图形化界面然后再进行vue工程的创建
vue ui我们采用第二种方法在工程目录下进入cmd直接输入命令vue ui 进入到vue的图形化界面: 便可在此图形化界面创造项目 到此vue项目创建结束。 vue项目目录结构介绍 vue项目的标准目录结构以及目录对应的解释如下图所示: 平时开发代码就是在src目录下。 vue项目运行方法
方法一
首先要将vscode的NPM脚本窗口调试出来: 然后重启VS Code并且双击打开package.json文件然后点击资源管理器处的3个小点勾选npm脚本选项如图所示 然后就能都显示NPM脚本小窗口了 点击之后我们等待片刻即可运行在终端界面中我们发现项目是运行在本地服务的8080端口我们直接通过浏览器打开地址 最终浏览器打开后呈现如下界面表示项目运行成功 其实此时访问的是 src/App.vue这个根组件此时我们打开这个组件修改代码添加内容Vue 只要我们保存更新的代码我们直接打开浏览器不需要做任何刷新发现页面呈现内容发生了变化 这就是我们vue项目的热更新功能
对于8080端口经常被占用所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容添加如下代码
devServer:{port:7000
}如下图所示然后我们关闭服务器在vscode命令行输入ctrl c关闭服务器并且重新启动发现是通过7000端口来访问我们之前的项目。 第二种方式命令行方式 直接基于cmd命令窗口在vue目录下执行输入命令npm run serve 即可如下图所示 Vue项目开发流程
其实我们访问的首页是index.html但是我们找到public/index.html文件打开之后发现里面没有什么代码但是能够呈现内容丰富的首页如下图所示 所以vue是如何做到的呢接下来我们学习一下vue项目的开发流程。 对于vue项目index.html文件默认是引入了入口函数main.js文件我们找到src/main.js文件其代码如下
import Vue from vue
import App from ./App.vue
import router from ./routerVue.config.productionTip falsenew Vue({router,render: h h(App)
}).$mount(#app)上述代码中包括如下几个关键点
import: 导入指定文件并且重新起名。例如上述代码import App from ./App.vue 导入当前目录下的App.vue并且起名为Appps:import代表引入模块与其对应的是export是将对象或者函数导出为模块在需要使用的地方将其importnew Vue(): 创建vue对象$mount(#app);将vue对象创建的dom对象挂在到idapp的这个标签区域中作用和之前学习的vue对象的le属性一致。这里就是挂载到了index.html中的div中router: 路由详细在后面的小节讲解render: 主要用于视图的渲染的。它在这里的作用就是将上面导入进来的app中定义的视图创建出对应的虚拟dom元素然后挂载到#app这个区域所以其实上述代码相当于
new Vue(el: #app,router:router,//es6写法是当属性名和属性值一样就可以简写为router,render: h h(App)
)来到public/index.html中我们删除div的idapp属性打开浏览器发现之前访问的首页一片空白就证明了我们main.js中通过代码挂载到index.html的idapp的标签区 域的。
此时我们知道了vue创建的dom对象挂在到idapp的标签区域但是我们还是没有解决最开始的问题 首页内容如何呈现的这就涉及到render中的App了如下图所示 那么这个App对象怎么回事呢我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分
template: 模板部分主要是HTML代码用来展示页面主体结构的
script: js代码区域主要是通过js代码来控制模板的数据来源和行为的
style: css样式部分主要通过css样式控制模板的页面效果得如下图所示就是一个vue组件的小案例 此时我们可以打开App.vue观察App.vue的代码其中可以发现App.vue组件的template部分内容和我们浏览器访问的首页内容是一致的如下图所示 接下来我们可以简化模板部分内容添加script部分的数据模型删除css样式完整代码如下
templatediv idapp{{message}}/div
/templatescript
export default {data(){return {message:hello world}}
}
/script
style/style保存直接回到浏览器我们发现首页展示效果发生了变化如下图所示 至此就熟悉了Vue项目开发的基本流程 PS: 其中写script标签时vscode有代码补全要选择javascript.vue。 补全后是下面这样的一个标准结构加了export代表我们定义的这一部分对象导出去只有这样讲其导出成一个模块在其他地方才能import。
script
export default {}
/script想定义vue当中的数据模型怎样写呢之前是这样写new一个Vue对象然后在里面声明属性data然后在里面指定对象。
new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}
})而现在不能指定对象而是指定函数function在函数里声明对象return回去若还想定义函数直接在下面再定义一个属性methods在其中定义一个个的方法
script
export default {
//写data可以自动提示补全data: function () {//在js里有简写 简写为:data()也可以return {message: Hello Vue,};},
};
/script
