Vue工程化

目录

一、环境准备

npm

二、Vue整站使用

1、Vue项目创建和启动

区别

目录结构

启动

2、Vue开发流程

 App.vue

快速入门

3、API风格

案例

细节注意

代码实现

测试 

一、环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目

依赖环境：node.js

开发平台：VScode

安装看这里 使用NVM实现多版本Node.js的版本共存和无缝切换_nodejs多版本共存_An1ong的博客-CSDN博客

create-vue的功能

  • 统一目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 继承打包

npm

npm：Node Package Manger，是Node.js的软件包管理器

其功能类似于Java中的maven 

二、Vue整站使用

1、Vue项目创建和启动

创建一个工程化项目，使用指令 npm init vue@latest

注：整个过程都需要联网

打开一个目录，待会创建出来的项目会放在这里，在最上面的地址栏里输入cmd打开命令行

其中，由于我们是第一次创建vue工程，所以全部默认即可

然后以此输入cd vue-project：进入刚刚创建好的项目中

        npm install：安装包管理器

 注意：我们目前使用的这个工具叫做Vue Vite，而不是Vue Cil

        Vue CLI 脚手架，是官方提供的基于 Webpack 的 Vue 工具链。建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

        如果要使用脚手架，其指令是 vue ui

区别

Vue CLI 和 Vite 都是用于创建 Vue 项目的工具，它们之间的主要区别在于：

  • 构建方式：Vue CLI 是基于 Webpack 进行构建的，而 Vite 则是基于 ESModules（原生 JavaScript 模块化）构建的。
  • 启动速度：由于采用了不同的构建方式，因此在项目启动和重新编译的速度上，Vite 更快一些。
  • 集成方式：Vue CLI 集成了 Vue Router、Vuex 等插件，而 Vite 则只提供了构建工具本身，需要手动添加 Vue Router、Vuex 等插件。
  • 插件生态：由于 Vue CLI 使用较长时间，因此它的插件生态比 Vite 更丰富。

综上所述，如果项目需要使用较多的插件和集成较多的第三方库，建议使用 Vue CLI；如果注重项目启动速度和开发效率，则可以考虑使用 Vite。

目录结构

用VScode打开这个项目

启动

在项目的命令行终端上输入指令：npm run dev 

或者直接在VScode中点击NPM脚本中的dev启动

Ctrl + 鼠标左键点击地址即可打开页面

2、Vue开发流程

先看main.js入口文件

首先解释两个问题

1、为什么是import { createApp } from 'vue'而不是之前在局部使用的导入地址呢

        

是因为在创建时已经将vue的核心下载到了node_modules目录下

2、createApp(App).mount('#app')是什么

        上句代码的import中将App.vue跟组件引入了这里起名叫App

这里的#app在index.html默认首页中，其底层其实和我们之前在局部使用vue的过程没有什么区别，同样都是creatApp然后将div容器起名app然后挂载到面。这样做的目的就是将App单独提取出来，这样就可以将重心放在App的开发

了解了这个，我们再来解释App.vue文件 

 App.vue

        *.vue文件时Vue文件的组文件，在Vue项目中也被称为单文件组件（SFC）。Vue的单文件会将一个组件的逻辑（JS），放入模板（HTML）和样式（CSS）封装在同一个文件里（*.vue）

快速入门

我们现在还是依照我们之前学的旧方式写一个vue页面，来对比理解。我们之前的那种写法，我们称之为选项式API

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data(){
    return{
      msg:'An1ong'
    }
  }
}
</script>

<style>
  h1{
    color:aqua
  }
</style>

由于createApp在main.js中，这里不能像之前那样直接将createApp 放入script中，要默认导出，这样就相当于将data导入到createApp里了。

现在使用新的语法模式，在scipt标签中加上setup，然后引入ref调用ref函数，定义响应式数据。

这是因为我们再像之前那样直接写数据的话，就不是响应式的了。

这种新的写法称之为 组合式API

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup>
  import { ref } from "vue"

  const msg = ref('An1ong');

</script>

<style>
  h1{
    color:aqua
  }
</style>

相比于选项式API，组合式API虽然写起来稍微复杂了一点，但是却让代码更灵活了

3、API风格

Vue的组件有两种不同的风格：组合式API 和 选项式API

案例

同样还是上次vue入门的案例，我们将上次的代码改造成vue工程化组合式API写法

细节注意

        在原本script中，调用数据要在数据前面加上this. 来指定，而在这里需要在数据后面加上.value才行。

且一般要把涉及到接口的方法提取出来，放到api目录下，因为这种方法的复用性很高。此时引入axios就可以使用npm install axios指定了，不需要再写一行地址来导入。其中then（result）和catch（）复用性也很高，所以也可以提取出来，这里可是写一个响应拦截器来实现，在这里也是一个js文件。

补充知识点-同步和异步

一个程序，自上而下地运行，做完第一件事才能做第二件事情，按照一定次序来，这就叫同步

哪怕中间要经过极其漫长地等待，那也要等，这就是同步

而所谓异步，就是主程序接着走，延迟和等待程序挂起到另一个列表中等待执行，不阻塞。不确定的时间执行不确定的指令。

js中大部分是同步，少有的异步有如下几个

定时器settimeout和setInterval、Ajax的异步请求、promiss...

异步的好处是不会因延迟和等待阻塞程序。

代码实现

响应拦截器util/reques.js

//定制请求的实例

//导入axios 首先需要在控制台输入指令npm install axios
import axios from 'axios'

//定义一个公共的前缀,baseUrl
const baseURL = 'http://localhost:8888';
const instance = axios.create({baseURL});

//添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert("服务异常");
        return Promise.reject(err)  //异步的状态转化成失败的状态
    }
)

export default instance;

        这段代码中，使用axios.create（）创建一个实例的主要目的是为了方便配置和管理。虽然你可以直接使用全局的axios对象进行请求，但通过创建实例，你能够更灵活地控制不同请求的配置，而不会影响到全局的axios配置。

        这里异常err中 之所以要返回一个Promise类型，是因为await在等待Promise 对象的解决或拒绝来结束异步的请求，这个看到后面的代码就理解了。

注意：baseURL不可以改名字，因为这是axios的属性，改成别的名字如 baseUrl 那么axios就识别不了了，除非你在create中指定

        create（baseURL : baseUrl（你自己定的名字） ）。不过还是建议直接一步到位写成baseURL让axios自己识别去

接口url/article.js

//引入响应拦截器
import request from '@/util/request.js'

export function articleGetAllService(){
    return request.get('/article/getAll');
}

export function articleSearchService(conditions){
    return request.get('/article/search',{params:conditions});
}

        在Vue项目中，@通常表示项目的根目录。这里就是将发起请求的接口封装成了函数并导出，供其他地方调用 

单文件组件article.vue

<template>
    <div>
        文章分类：<input type="text" v-model="searchConditions.category">
        发布状态：<input type="text" v-model="searchConditions.state">
        <button @click="search">搜索</button>
      <table>
        <tr>
          <td>标题</td>
          <td>分类</td>
          <td>时间</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
 
        <tr v-for="item in articleList " :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.time }}</td>
          <td>{{ item.state }}</td>
          <td>
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
      </table>
      </div>
  
</template>

<script setup>
    import {articleGetAllService,articleSearchService} from '@/api/article.js'
    import {ref} from 'vue'

    //定义响应式数据 ref
    const articleList = ref([]);

    //获取文章数据
    //同步获取数据
    const getAllArticle = async function(){
        let data = await articleGetAllService();
        articleList.value = data
    }

    getAllArticle();    //本来应该用onMounted包裹，但由于代码从上到下执行，所以直接写在这里就相当于加载完页面就直接执行了

    //定义响应式数据 searchConditions
    const searchConditions = ref({
        category:'',
        state:''
    })

    //声明search函数,这里就不用放到method属性里了
    const search = async function(){
        let data = await articleSearchService({...searchConditions.value});
        articleList.value = data
    }

</script>

<style>

</style>

这里面值得说道的就多了，首先

1、由于已经没有了data和method让你在里面指定数据和函数，所以可直接const数据，但是注意要用ref接收一下。方法不需要，const一下是因为这是js的特性-可以直接让一个变量存放函数，建议这样写，当然也可以不这样。

2、async和await                                                                                                                                                                                                               async是 "异步" 的简称， 用于定义一个函数，表明该函数是异步的，它将返回一个 Promise。在async函数内部，你可以使用await来等待一个 Promise 对象的解决或拒绝。

         await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数，但要清楚，它等的实际是一个返回值。

        如果现在不理解，那么就先记住，在调用的请求接口的方法前面加上await，这个请求一般都在外部都有另一个函数在他外部，在外部的这俄格方法前面加上async就完了。

像这样

        具体请看理解 JavaScript 的 async/await - 知乎 (zhihu.com)

3、调用   articleSearchService({...searchConditions.value});   里面 ... 是展开运算符，因为searchConditions里面有多个参数，在script里使用又需要在后面加上.value，因此searchConditions.value就是这个对象的多个参数，...searchConditions.value就相当于将里面的参数分别展开了。

上面的几段代码建议多打几遍，直到完全理解

测试 

三、Element Plus

直接看官方文档使用即可

设计 | Element Plus (gitee.io)icon-default.png?t=N7T8https://element-plus.gitee.io/zh-CN/guide/design.html

安装指令：npm install element-plus --save

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/152874.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

5个高质量的自用原型设计工具分享！

5个高质量的自用原型设计工具分享！

什么是原型&#xff1f;原型可以概括为整个产品推出前的框架设计。设计师可以用它来引导每个人参与这个项目。原型显示了每个部分之间的比重和每个部分之间的联系。原型不仅仅是一个表面的东西&#xff0c;它是可以和用户对话的&#xff0c;向用户解释该如何与产品进行交互。例…
阅读更多...
一文讲解关于嵌入式系统程序运行的几个问题

一文讲解关于嵌入式系统程序运行的几个问题

问题1&#xff1a;FLASH中的代码是如何得到运行的呢&#xff1f;比如PC指针是在哪里由谁设置的&#xff1f; 以ARM为例&#xff1a; ARM-cortex-M3/4的单片机&#xff08;比如STM32 等&#xff09;&#xff1a;该类单片机的代码在nor flash中&#xff0c;cortex内核可以直接运行…
阅读更多...
Python入门教程之基本语法详解，收藏慢慢学~

Python入门教程之基本语法详解，收藏慢慢学~

文章目录 一、Python输出1、repr() 或 str() 转成字符串2、字符串填充空格进行格式化3、!a (使用 **ascii()**), !s (使用 **str()**) 和 !r (使用 **repr()**) 可以用于在格式化某个值之前对其进行转化 二、Python标识符三、Python保留字符&#xff08;关键字&#xff09;四、…
阅读更多...
VC6.0 添加CMarkup文件，程序编译不成功

VC6.0 添加CMarkup文件，程序编译不成功

报错信息 Generating Code... Linking...Creating library Release/Iodevcfg.lib and object Release/Iodevcfg.exp ItemConfigDlg.obj : error LNK2001: unresolved external symbol "public: __thiscall CMarkup::~CMarkup(void)" (??1CMarkupQAEXZ) ItemConfigD…
阅读更多...
具有mDNS功能的串口服务器

具有mDNS功能的串口服务器

1.概述: 通过mDNS协议可以获得设备的ID、mac、IP、port等信息&#xff0c;方便计算机在同一个局域网内连接到具有该服务的模块。支持产品有串口服务器、串口转以太网模块、RS485串口转网口芯片等。 图 1 mDNS网络结构图 当具有mDNS的服务的设备接入网络的时候&#xff0c;首先…
阅读更多...
leetcode链表必刷题——移除链表元素、设计链表、反转链表、两两交换链表中的节点、删除链表的倒数第 N 个结点、相交链表、环形链表、环形链表 II

leetcode链表必刷题——移除链表元素、设计链表、反转链表、两两交换链表中的节点、删除链表的倒数第 N 个结点、相交链表、环形链表、环形链表 II

文章目录 移除链表元素设计链表反转链表两两交换链表中的节点删除链表的倒数第 N 个结点相交链表环形链表环形链表 II 移除链表元素 题目链接 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节…
阅读更多...
1分钟精准预测未来10天天气，谷歌开源GraphCast

1分钟精准预测未来10天天气，谷歌开源GraphCast

11月15日&#xff0c;谷歌旗下著名AI研究机构Deepmind在官网宣布&#xff0c;开源天气大模型GraphCast&#xff0c;并公布了论文。 据悉&#xff0c;GraphCast可以在1分钟内&#xff0c;精准预测而来全球10天的天气情况&#xff0c;同时可以提前预警大暴雨、大风雪、洪水、高温…
阅读更多...
KeyarchOS的CentOS迁移实践：使用操作系统迁移工具X2Keyarch V2.0

KeyarchOS的CentOS迁移实践：使用操作系统迁移工具X2Keyarch V2.0

KeyarchOS的CentOS迁移实践&#xff1a;使用操作系统迁移工具X2Keyarch V2.0 作者&#xff1a; 猫头虎博主 文章目录 KeyarchOS的CentOS迁移实践&#xff1a;使用操作系统迁移工具X2Keyarch V2.0&#x1f405;摘要引言1. 迁移前的精心准备1.1 系统环境介绍1.2 深度数据验证1.2.…
阅读更多...
语音识别芯片NRK3301在智能茶吧机的应用

语音识别芯片NRK3301在智能茶吧机的应用

传统的饮水机传大多只能提供热水和冷水&#xff0c;而智能茶吧机则是一款集合了热饮水机、煮茶器、泡茶壶等多种功能于一体的多功能生活电器。它不仅具备了传统饮水机的所有功能&#xff0c;还可以根据不同的需求&#xff0c;提供多种水温的饮水方式&#xff1b;还具备了煮茶和…
阅读更多...
Cesium+Vue：地形开挖

Cesium+Vue：地形开挖

作者：CSDN @ _乐多_ 本文记录了在Cesium中进行地形开挖的方法和代码。使用Vue框架。 效果如下所示， 文章目录 前言：配置Cesium一、Vue文件二、创建地形开挖函数库三、创建绘制图形库四、创建提示语库前言：配置Cesium 参考《Vue：Vue项目中的Cesium配置备忘录》
阅读更多...
【搭建私人图床】使用LightPicture开源搭建图片管理系统并远程访问

【搭建私人图床】使用LightPicture开源搭建图片管理系统并远程访问

文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进&#xff0c;功能也越来越多&#xff0c;而手机…
阅读更多...
安装PostgreSql 9.6版本报错

安装PostgreSql 9.6版本报错

先去官网&#xff1a;Community DL Page 下载了一个“9.6.24*”版本的PostgreSql&#xff0c;然后开始安装。 安装PostgreSql 报错&#xff1a; Cant install PostgreSQL: An error occurred executing the Microsoft VC runtime installer 第一&#xff0c;先&#xff1a;右…
阅读更多...
外汇天眼：「外汇回撤」这术语是指什么？

外汇天眼：「外汇回撤」这术语是指什么？

"外汇回撤"是外汇交易中一个常见的专业术语。对于许多投资者&#xff0c;尤其是初学者来说&#xff0c;可能并不十分理解这个术语的实质。下面我们将详细介绍外汇回撤的含义。 外汇回撤通常被称为"外汇百分比回撤"。在外汇市场出现强烈趋势波动时&#xf…
阅读更多...
Python自动化测试之request库详解（三）

Python自动化测试之request库详解（三）

做过接口测试的都会发现&#xff0c;现在的接口都是HTTPS协议了&#xff0c;今天就写一篇如何通过request发送https请求。 什么是HTTPS HTTPS 的全称是Hyper Text Transfer Protocol over Secure Socket Layer &#xff0c;是以安全为目标的HTTP通道&#xff0c;简单的讲是HTT…
阅读更多...
UI游戏设计模板大放送：7种别具匠心的创意！

UI游戏设计模板大放送：7种别具匠心的创意！

随着游戏产业的快速发展&#xff0c;UI游戏设计已经成为一个热门的设计行业&#xff0c;但与之前的设计相比&#xff0c;UI游戏设计还是比较特殊的&#xff0c;主要体现在UI游戏设计难度大&#xff0c;需要大量的手绘内容和对游戏玩法的理解上。这些门槛需要大量的时间去学习&a…
阅读更多...
ALlegro怎么恢复到初始操作界面？

ALlegro怎么恢复到初始操作界面？

1.View 2.UI Settings 3.Reset UI To Default
阅读更多...
Python winreg将cmd/PowerShell（管理员）添加到右键菜单

Python winreg将cmd/PowerShell（管理员）添加到右键菜单

效果 1. 脚本 用管理员权限运行&#xff0c;重复执行会起到覆盖效果&#xff08;根据sub_key&#xff09;。 icon自己设置。text可以自定义。sub_key可以改但不推荐&#xff08;避免改成和系统已有项冲突的&#xff09;。command不要改。 from winreg import *registry r&q…
阅读更多...
【小黑送书—第七期】＞＞程序员To架构师？一起来看架构师系列书籍推荐

【小黑送书—第七期】＞＞程序员To架构师？一起来看架构师系列书籍推荐

相信大家都对未来的职业发展有着憧憬和规划&#xff0c;要做架构师、要做技术总监、要做CTO。对于如何实现自己的职业规划也都信心满满&#xff0c;努力工作、好好学习、不断提升自己。 相信成为一名优秀的架构师是很多程序员的目标&#xff0c;架构师的工作包罗万象&#xff…
阅读更多...
web前端开发网页设计课堂作业/html练习《课程表》

web前端开发网页设计课堂作业/html练习《课程表》

目标图&#xff1a; 运行代码&#xff1a; <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>无标题文档</title><body> <table border"3" align"center"> &…
阅读更多...
Python 搭建虚拟环境

Python 搭建虚拟环境

一、虚拟环境简介 虚拟环境virtual environment&#xff0c;它是一个虚拟化&#xff0c;从电脑独立开辟出来的环境。通俗的来讲&#xff0c;虚拟环境就是借助虚拟机来把一部分内容独立出来&#xff0c;我们把这部分独立出来的东西称作“容器”&#xff0c;在这个容器中&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站