乐趣区

关于软件测试:技术分享-测试平台开发前端开发之Vuejs-框架

jiezi

Vue.js 是一套用于构建用户界面的渐进式框架，在目前的前端凋谢中比拟风行的前端框架。
Vue 被设计成自底向上的逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或已有我的项目整合。然而学习 Vue.js 须要肯定的 HTML、CSS、和 JavaScript 根底，所以本章节将不对这些根底内容进行解说。

Vue 的组件化开发

目前的前端开发中组件化开发成为了潮流，而所谓的组件化开发就是把页面拆分成多个组件，最初将每一个组件进行列举，造成咱们看到的网页。

例如：百度的首页，能够简略的分为以下图中的四个组件

先将这四块的组件开发实现之后，再将这些组件组装成一个残缺的页面。

1. 在保护网页时，不须要在一个大的页面中去批改，而是去对应的组件中去批改数据。
2. 组件的资源是独立的，能够进步每个模块的重用性。比方上图的搜素框，在首页应用到了，在其余的中央也要用到同样的搜寻框，就能够一成不变的将组件拿过去间接用。
3. 组件之间能够互相嵌套。

环境介绍和筹备

这里选用的是 vscode，其余编译器也可，vscode 下载地址：https://code.visualstudio.com/。
vscode 插件的抉择：

  • JavaScript (ES6) code snippets：蕴含 VSCode 的 ES6 语法中的 JavaScript 代码段。
  • Vetur：VSCode 反对 VUE 的工具，有语法高亮、格式化、谬误查看、主动实现等性能。
  • （举荐）Auto Close Tag：主动增加 HTML/XML 完结标签。
  • （举荐）Auto Rename Tag：主动重命名对应的 HTML/XML 标签。
  • Highlight Matching Tag：突出显示匹配的开始和完结标签。
    这些只是举荐须要用到的插件，能够依据本人的喜好进行抉择，其余的插件也能够。

组件库

随着 Vue 的风行，其余公司也造成了本人独有的组件库，比方 ElementUI、BootstrapVue、Vuetify，这些组件可都是能够拿来间接应用的，这里体现出了 Vue 组件化开发的劣势。

  • ElementUI：https://element.eleme.io/#/
  • BootstrapVue：https://bootstrap-vue.org/
  • Vuetify：https://vuetifyjs.com/zh-Hans/
    这里次要应用的组件库是 vuetify。
    比方我的项目中须要一个按钮时，就能够到对用的组件上面找到它，将代码拿进去即可，外面有各式各样格调的组件：https://vuetifyjs.com/en/comp…

Vue.js 装置

1、通过下载 Vue.js 包
应用 <script> 标签进行引入，Vue 会被注册为全局变量。

<script src="../vuejs/vue.js"></script>

2、在线援用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

指定一个明确的版本进行应用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

这是一个更小的构建，能够带来比开发环境下更快的速度体验，然而在用 Vue 构建大型利用时举荐应用 NPM 装置。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合应用。同时 Vue 也提供配套工具来开发单文件组件。

npm 装置 Vue

环境筹备：本次应用的 node 和 npm 的版本是

C:\Users\16478>node -v
v12.15.0

C:\Users\16478>npm -v
6.13.4

装置命令

npm install -g @vue/cli

C:\Users\16478>vue --version
@vue/cli 4.5.12

大家先把环境装置好，有的环境后，下一篇咱们接着说 Vue.js 框架的应用哦~

退出移动版