前端工程化

最新推荐文章于 2024-05-18 22:08:03 发布

又该洗头了

最新推荐文章于 2024-05-18 22:08:03 发布

阅读量862

点赞数 42

文章标签：前端 vue 前端框架 node.js elementui ajax

本文链接：https://blog.csdn.net/weixin_74521994/article/details/138822363

版权

vue

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，发音为 /vjuː/，类似于英文单词"view"。它是由创始人尤雨溪（Evan You）在2014年发布的一个开源项目，目前由Vue团队进行维护和开发。

以下是Vue.js的一些主要特点：

轻量级：Vue.js的体积相对较小，核心库的大小在76至240 KB之间，这使得它能够快速加载并高效运行在各种大小的项目中。
易于上手：Vue.js的学习曲线平缓，其文档齐全，社区活跃，非常适合初学者学习和使用。
响应式和组件化：Vue.js提供了响应式的数据绑定和组件化的编程模型，使得开发者能够以声明的方式构建用户界面，提高开发效率。
支持现代浏览器：Vue.js支持包括Chrome、IE、Safari、Opera、Firefox、Edge等在内的多种浏览器平台。
灵活性：Vue.js可以被用作一个完整的框架，也可以只使用它的一小部分功能来改善现有的项目。
生态系统丰富：Vue.js拥有丰富的生态系统，包括Vuex（状态管理模式）、Vue Router（官方路由管理器）以及许多其他由社区提供的插件和工具。
MIT许可：Vue.js遵循MIT许可证，这意味着它可以被免费使用在开源和商业项目中。

vue指令

Vue指令是Vue.js框架中用于操作DOM的一种机制，它可以帮助我们将数据的变化与页面的动态行为连接起来。

以下是一些常用的Vue指令及其作用：

v-on：用于绑定事件监听器，如点击、键盘输入等。例如，v-on:click="methodName" 会在点击事件发生时调用指定的JavaScript方法。
v-bind：用于动态绑定一个或多个特性，或一个组件 prop 到一个表达式。例如，v-bind:class="{ active: isActive }" 会根据isActive的值来动态改变元素的类名。
v-model：在表单输入和应用状态之间建立双向绑定。它结合了v-bind和v-on的功能，使得我们可以轻松地实现表单输入和应用数据的同步更新。
v-for：用于渲染列表，可以遍历数组或对象，并为每个项生成相应的DOM元素。例如，v-for="item in items" 会为items数组中的每个元素创建一个循环。
v-show 和 v-if：用于条件性地渲染元素。v-show 通过切换元素的 CSS display 属性来实现，而 v-if 则通过条件性地创建或销毁元素来实现。
v-else 和 v-else-if：与 v-if 配合使用，用于在多个条件分支中选择渲染哪一个元素。
v-text：用于插入文本内容，它会覆盖元素的内容。
v-html：与 v-text 类似，但它可以解析并插入HTML代码。
v-cloak：用于防止未编译的模板被显示出来，直到Vue实例完成编译。
v-once：用于只渲染一次元素，即使在数据变化后也不会重新渲染。
v-pre：用于跳过编译过程，保留原始的文本内容。

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

代码展示

以下是一些Vue指令的代码示例：

v-on:click 示例：

<button v-on:click="increment">Click me</button>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

v-bind:class 示例：

<div v-bind:class="{ active: isActive }"></div>

new Vue({
  el: '#app',
  data: {
    isActive: true
  }
});

v-model 示例：

<input v-model="message" placeholder="Type something...">

new Vue({
  el: '#app',
  data: {
    message: ''
  }
});

v-for 示例：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

new Vue({
  el: '#app',
  data: {
    items: ['Apple', 'Banana', 'Orange']
  }
});

v-show 和 v-if 示例：

<div v-if="isVisible">This will be shown if isVisible is true.</div>
<div v-show="isVisible">This will always be rendered, but hidden or shown based on isVisible.</div>

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

v-text 示例：

<span v-text="message"></span>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
});

v-html 示例：

<div v-html="htmlContent"></div>

new Vue({
  el: '#app',
  data: {
    htmlContent: '<strong>This is bold text.</strong>'
  }
});

这些示例展示了Vue指令的基本用法，你可以根据具体需求选择适合的指令来实现你的应用逻辑。

Axios

Axios是一个基于promise的网络请求库，它被广泛使用在浏览器和Node.js环境中。

Axios的特点如下：

简洁易用：Axios设计上追求简洁明了，易于上手和使用。它能够通过简单的配置来发出GET、POST等不同类型的HTTP请求。
同构性：Axios能够在服务器端（Node.js）和客户端（浏览器）中使用同一套代码。在服务器端，它使用原生的Node.js HTTP模块，而在客户端则使用XMLHttpRequests来处理请求。
支持多种请求方法和配置选项：Axios支持GET、POST、PUT、DELETE等多种HTTP方法，并允许用户通过配置对象自定义请求参数，如URL、请求头、查询字符串等。
处理跨域和数据转换：Axios可以处理跨域请求，并且支持请求和响应数据的自动转换，例如将JSON数据转换为JavaScript对象。
拦截请求和响应：Axios允许用户在请求发送前或响应返回后进行拦截，这可以用来实现一些通用的功能，如添加认证信息、统一处理错误等。
取消请求：Axios提供了取消请求的功能，这对于需要中止长时间运行或有条件的请求非常有用。
自动转换JSON数据：如果服务器返回的是JSON格式的数据，Axios会自动将其转换为JavaScript对象，使得数据处理更加方便。
客户端支持防御XSRF：在浏览器环境中，Axios自动添加一个XSRF令牌到请求头部，帮助防止跨站请求伪造攻击。
兼容性：Axios支持所有现代浏览器，并且在IE 9及以上版本中也能正常工作。

以下是使用Axios发送GET请求的示例代码：

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码中，我们首先导入了Axios库。然后，使用axios.get()方法发送一个GET请求到指定的URL（这里是/api/data）。该方法返回一个Promise对象，我们可以使用.then()方法来处理成功的响应，并使用.catch()方法来处理失败的情况。

在成功的回调函数中，我们可以通过response.data获取服务器返回的数据。如果请求失败，则可以在.catch()方法中处理错误情况。

除了GET请求外，Axios还支持其他类型的HTTP请求，如POST、PUT、DELETE等。以下是一个使用Axios发送POST请求的示例代码：

import axios from 'axios';

const data = {
  name: 'John',
  age: 30
};

axios.post('/api/users', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们首先定义了一个包含用户信息的JavaScript对象data。然后，使用axios.post()方法发送一个POST请求到指定的URL（这里是/api/users），并将数据作为第二个参数传递给该方法。成功和失败的处理方式与GET请求相同。

Axios还提供了许多其他功能，如配置选项、拦截器、取消请求等。可以根据具体需求查阅Axios的官方文档以了解更多详细信息。

NodeJS

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它采用了事件驱动和非阻塞I/O模型。

Node.js的出现使得JavaScript不仅仅局限于在浏览器端运行，还能够在服务器端进行高效的并发处理。以下是Node.js的一些主要特点：

事件驱动机制：Node.js通过事件循环和回调函数来处理并发，这使得它在处理大量并发请求时性能非常高。
非阻塞I/O：Node.js在进行文件或网络操作时不会阻塞线程，这样可以提高程序的执行效率。
模块系统：Node.js具有一个强大的模块系统，允许开发者通过require语句来导入其他JavaScript文件，便于代码的复用和管理。
npm包管理器：Node.js提供了一个名为npm的包管理器，它是全球最大的开源库生态系统之一，开发者可以通过npm来安装、分享和管理各种JavaScript库和工具。
跨平台性：Node.js支持多种操作系统，包括Windows、macOS和Linux，使得开发的应用程序可以在不同的平台上运行。
社区支持：Node.js拥有一个活跃的社区和大量的第三方模块，这些模块涵盖了从Web框架到数据库驱动的各种功能，极大地丰富了Node.js的生态系统。
适合实时应用：由于其非阻塞的特性，Node.js特别适合开发实时应用，如在线游戏、聊天应用等。

NodeJS安装

1. 下载安装包双击

2. 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

3. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\develop\NodeJS"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

5. 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

6. 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

Vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。

Vue CLI 的主要作用是提供一个标准化的脚手架，帮助开发者快速搭建和配置 Vue.js 项目。它通过集成了前端生态中优秀的工具和插件集合，简化了项目初始化、开发、构建和管理等环节，提高了开发效率。

使用 Vue CLI 的优势包括：

快速项目搭建：通过 vue create 命令可以快速创建一个新项目的脚手架，或者使用 vue serve 构建新想法的原型。
预设配置：Vue CLI 提供了基于 Webpack 的合理默认配置，减少了手动配置的时间和出错的可能性。
插件系统：可以通过插件扩展功能，例如支持 Vuex、Vue Router 和其他常用库的集成。
图形化界面管理：在 Vue CLI 3.x 中，通过 vue ui 提供了一个完全图形化的界面来创建和管理 Vue.js 项目。

创建vue项目

首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：

然后进入如下界面：

然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：

然后我门选择创建按钮，在vue文件夹下创建项目，如下图所示：

然后来到如下界面，进行vue项目的创建

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

到此，vue项目创建结束

Vue路由

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。

Vue Router 提供了以下关键功能：

安装与使用：首先需要安装 Vue Router，然后在项目中引入并使用它。通常在项目的主入口文件中进行配置。
动态路由匹配：通过动态段（如：id）来匹配不同的路由，使得同一个路由路径可以渲染不同的内容。
参数传递：可以在路由之间传递参数，这些参数可以是路径的一部分，也可以是查询字符串或路由参数。
嵌套路由：允许将路由配置嵌套在其他路由中，从而实现更复杂的页面结构。
路由守卫：可以在路由切换过程中进行权限验证等操作，确保只有满足条件的用户才能访问特定路由。

具体到代码实现，一个基本的路由配置可能如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在这个例子中，我们定义了两个路由，分别对应主页和关于页面。每个路由都有一个路径、一个名称和一个组件。当用户访问这些路径时，对应的组件将被渲染。

Element

Element是一套基于Vue 2.0的桌面端组件库，专为快速网站开发而设计。

Element-UI是一个流行的UI组件库，它基于Vue框架，并提供了一系列预制的组件，如按钮、表格、对话框等，以帮助开发者快速构建高质量的网页界面。以下是Element的一些特点和使用说明：

特点：

丰富的组件：Element提供了各种常用的PC端组件，包括但不限于布局、导航、输入、选择、弹出框等。
易于使用：Element旨在简化开发流程，减少了对常用组件封装的需求，使得开发者可以更加专注于业务逻辑。
可定制性：虽然Element提供了默认的样式和行为，但开发者也可以根据项目需求进行个性化定制。
响应式支持：Element的组件设计考虑到了响应式布局，可以适应不同尺寸的屏幕和设备。

使用说明：

安装：首先需要确保你的项目中已经安装了Vue.js。然后，可以通过npm或yarn来安装Element-UI。
引入：在项目的主入口文件中引入Element的CSS和JS文件，或者使用Vue CLI的插件系统自动引入。
注册：在Vue实例中注册Element的组件，之后就可以在Vue模板中使用这些组件了。
使用：根据Element提供的文档，选择合适的组件并按照API进行使用，通过组件的属性和方法来控制其行为和样式。

以下是一个简单的Element代码案例，演示了如何使用Element的按钮组件和对话框组件：

<template>
  <div>
    <el-button @click="showDialog">点击打开对话框</el-button>
    <el-dialog title="欢迎使用Element" :visible.sync="dialogVisible">
      <span>这是一段文本内容。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: falsehtm
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

在这个例子中，我们使用了el-button和el-dialog两个组件。当用户点击按钮时，会触发showDialog方法，将dialogVisible属性设置为true，从而显示对话框。在对话框中，我们添加了一些文本内容和一个底部按钮，用于关闭对话框。

这只是一个简单的示例，Element还提供了许多其他组件和功能，可以根据具体需求进行选择和使用。

又该洗头了

关注

42
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
前端工程化

Vue CLI 的主要作用是提供一个标准化的脚手架，帮助开发者快速搭建和配置 Vue.js 项目。它通过集成了前端生态中优秀的工具和插件集合，简化了项目初始化、开发、构建和管理等环节，提高了开发效率。Element-UI是一个流行的UI组件库，它基于Vue框架，并提供了一系列预制的组件，如按钮、表格、对话框等，以帮助开发者快速构建高质量的网页界面。在这个例子中，我们定义了两个路由，分别对应主页和关于页面。这只是一个简单的示例，Element还提供了许多其他组件和功能，可以根据具体需求进行选择和使用。
复制链接

扫一扫