Element-ui-vue3-前端界面开发-配置-编辑main.js-nodejs基础语法-vue3-html模板语法-vue文件编译

前端配置

  • 1.下载nodejs 18 lts
  • 2.配置nodejs和安装vue
  • 3.vue调试技巧
    • 3.1.debugger
    • 3.2.vue devtools
  • 4.编辑main.js
  • 5.nodejs基础语法
    • 5.1.import
      • 5.1.1.导入单个模块或组件
      • 5.1.2.导入整个模块或库
      • 5.1.3.导入默认导出
      • 5.1.4.导入 css文件
      • 5.1.5.导入模块和组件
    • 5.2.export
      • 5.2.1.命名导出
      • 5.2.2.默认导出(每个模块包含一个)
      • 5.2.3.导出模块合集
      • 5.2.4.export和export default的区别
    • 5.3.箭头函数 =>
      • 5.3.1.语法
      • 5.3.2.范例
  • 6.vue文件编译
    • 6.1.模板语法
      • 6.1.1.双大括号表达式
      • 6.1.2.this指针改代理对象
      • 6.1.3.条件渲染 v-if, v-else-if, v-else
      • 6.1.4.属性绑定 v-bind
      • 6.1.5.事件监听 v-on
      • 6.1.6.表达数据的双向绑定 v-model
      • 6.1.7.列表渲染 v-for
      • 6.1.8.更新内容 v-html
      • 6.1.9.ref 文档节点索引
      • 6.1.10.计算属性
      • 6.1.11.监听属性 watch
      • 6.1.12.修饰符
      • 6.1.13.方法调用
      • 6.1.14.指令参数
    • 6.2.setup data create混编
    • 6.3.data函数

1.下载nodejs 18 lts

作者在官网下载node-v18.20.2-x64.msi版本,然后默认点击下一步安装nodejs。

2.配置nodejs和安装vue

npm config set registry https://registry.npmmirror.com #设置镜像
npm config get registry #查看镜像npm config set prefix "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_global"
npm config set cache "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache16\node_cache"npm config set prefix "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global"
npm config set cache "C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_cache"#添加路径
set path=%path%;C:\Users\18928\Desktop\资源网站设计\Project\Code\NodeJS\Cache18\node_global#安装vue
npm install vue -g
npm i @vue/cli -g#创建项目
vue create resourceshow
cd resourceshow
npm run serve#安装界面
npm install element-ui -g

3.vue调试技巧

3.1.debugger

在指定位置加入调试语句:

debugger

应用debugger调试Vue项目,需要在项目中需要的位置写debugger,项目运行后,打开浏览器按F12,在chrome sources页签中就会直接进入断点,至此就可以可以进行单步、跳步调试。

3.2.vue devtools

通过vue.js devtools配合在浏览器中展示源代码(Sources标签页)打断点,来调试非常也是非常方便,修改配置文件vue.config.js,如下所示:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,configureWebpack: {devtool: 'source-map'}
})

如下图所示:
在这里插入图片描述
找到代码位置,打下断点。

4.编辑main.js

可以在main.js中添加js代码来扩展现有的功能,它在src目录下,内容如下所示:

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

比如在最后一行下断点,然后重新加载,就会在指定暂停调试。

5.nodejs基础语法

5.1.import

5.1.1.导入单个模块或组件

import { 模块名 } from '模块路径';
//实例
import { ref, reactive } from 'vue';

在上述示例中,使用import语法从vue模块中导入了ref和reactive两个函数。

5.1.2.导入整个模块或库

import * as 模块名 from '模块路径';
//实例
import * as axios from 'axios';

在上述示例中,使用import语法将整个axios库导入为一个命名空间对象。

5.1.3.导入默认导出

import 默认导出名称 from '模块路径';
//实例
import Vue from 'vue';

在上述示例中,使用import语法将vue模块的默认导出(通常是Vue构造函数)导入为Vue变量。

5.1.4.导入 css文件

import 'iview/dist/styles/iview.css';

如果是在.vue文件中,需要在其外面套一个style。

<style>@import './test.css';
</style>

5.1.5.导入模块和组件

解析import '@…'语句,@等价于 /src 这个目录,避免写麻烦而又易错的相对路径。

导入模块

import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

导入组件

import name1 from './name1';
import name2 from './name2';
import App from './app.vue';
components:{name1,name2,App,
},

5.2.export

在创建 JavaScript 模块时,export 语句用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用import 进行导入时,这些绑定值只能被导入模块所读取,但在 export 导出模块中对这些绑定值进行修改,所修改的值也会实时地更新。

5.2.1.命名导出

// 导出单个特性
export let name1, name2,, nameN; // also var, const
export let name1 =, name2 =,, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}// 导出列表
export { name1, name2,, nameN };// 重命名导出
export { variable1 as name1, variable2 as name2,, nameN };// 解构导出并重命名
export const { name1, name2: bar } = o;

范例

// 导出 test.ts
export const a = 1
export const b = 2// 导入
import { a, b } from '/@/utils/test'
console.log(a, b) // 1, 2

使用 * 接受所有的导出

import * as test from'/@/utils/test' console.log(test)

5.2.2.默认导出(每个模块包含一个)

// 默认导出
export default expression;
export default function () {} // also class, function*
export default function name1() {} // also class, function*
export { name1 as 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学建模资料|历年数维杯数学建模竞赛真题及获奖论文汇总

2024年第九届数维杯大学生数学建模挑战赛:2024年5月10日08:00-5月13日09:00举行,为了更好的帮助参赛同学了解竞赛的赛制及赛题特点,数乐君今天给大家整理了历年数维杯国赛真题及优秀论文,方便同学们赛前巩固训练,掌握解题方法,提高获奖率。 2023年数维杯国赛真题(ABC题…

Ponder-C++反射库入门

Ponder-C反射库入门 前言CMakeVS2022构建Demo环境搭建 前言 Ponder&#xff1a;Expose C classes and objects so they can used as data. Serialisation and Lua scripting supported 公开C类和对象&#xff0c;以便他们用作数据。且支持徐丽华和Lua脚本绑定。 github地址&am…

如何在没有备份的情况下恢复 Mac 上丢失的数据

如果您因意外删除、错误格式化硬盘或文件损坏而丢失了重要的、感伤的文件、照片或音乐&#xff0c;那么这可能会令人非常痛苦。幸运的是&#xff0c;您有几个选择。 您的 Mac 位于数字宇宙的中心。您可能会在上面留下照片和视频形式的记忆&#xff0c;以及来自您不再见面的朋友…

Java使用JSch实现SSH远程执行命令

前言 有一个奇怪的需求&#xff0c;就是将本地的内容直接提交到远程服务器&#xff0c;并且需要针对文件夹进行处理。所以&#xff0c;这里就直接采用JSch来实现。在这里&#xff0c;感谢秀发浓密的程序猿的这篇博客&#xff0c;给了很大启发。 思路 既然是直接读取文件夹&am…

前端如何设置div可滚动,且设置滚动条颜色

在前端中&#xff0c;设置 div 为可滚动并通过 CSS 自定义滚动条的颜色并不是所有浏览器都直接支持的功能&#xff0c;因为滚动条的样式在很大程度上取决于操作系统和浏览器的默认样式。然而&#xff0c;你可以使用某些 CSS 属性来尝试自定义滚动条的外观&#xff0c;这些属性在…

C语言 | Leetcode C语言题解之第75题颜色分类

题目&#xff1a; 题解&#xff1a; void swap(int *a, int *b) {int t *a;*a *b, *b t; }void sortColors(int *nums, int numsSize) {int p0 0, p2 numsSize - 1;for (int i 0; i < p2; i) {while (i < p2 && nums[i] 2) {swap(&nums[i], &num…

Linux系统 -- 创建systemd服务单元 Python 程序在系统启动时自动启动,并持续运行。

1. 创建一个名为 model_ai.service 的文件&#xff0c;并将其放置在 /etc/systemd/system/ 目录中。 2. 命令创建和编辑文件 sudo vim /etc/systemd/system/model_ai.service 3. 在打开的编辑器中&#xff0c;添加以下内容&#xff1a; [Unit] DescriptionModel AI Python S…

【C/C++基础】Lambda 表达式

文章目录 介绍 lambda谓词lambda 表达式的形式 向 lambda 传递参数使用捕获列表值捕获引用捕获隐式捕获 指定 lambda 返回类型返回 void 类型使用尾置返回类型 介绍 lambda 我们在自定义排序中经常看到如下代码&#xff1a; sort(nums.begin(), nums.end(), [](const int&…

10 种超赞的 MyBatis 写法,同事都说好用!

MyBatis 虽说给我们的开发带来了很多的便捷&#xff0c;但有些地方写起来依旧比较的麻烦&#xff0c;比如配置XML的时候&#xff0c;但是一个好的写法&#xff0c;不仅能为我们节省不少时间、还能能降低出错的概率&#xff0c;下面就给大家分享一些优质的写法&#xff1a; 1用…

数据结构(一)初识数据结构

数据结构&#xff08;一&#xff09;初识数据结构 要点&#xff1a;解决问题的效率与数据的组织方式有关 思考&#xff1a;如何考虑数据结构 01 如何考虑数据结构 参考&#xff1a;从数据如何插入和如何取出两个角度考虑数据存储结构 在此基础上&#xff0c;考虑数据的空间…

Hive操作运算符

关系操作符 以下操作符比较操作数(operands)从而产生TRUE/FALSE值.运算符操作数描述A B所有基本类型如果表达A等于表达B,结果TRUE,否则FALSE.A ! B所有基本类型如果A不等于表达式B表达返回TRUE,否则FALSE.如果有值为NULL&#xff0c;不会返回结果A < B所有基本类型TRUE,如…

vue强制刷新组件

在Vue中强制刷新一个组件&#xff0c;通常不是一个推荐的做法&#xff0c;因为Vue的响应式系统设计就是为了自动处理依赖的更新。要强制重新渲染组件&#xff0c;以下是几种方法&#xff1a; 使用key属性&#xff1a; 最常见的方法是改变组件的key属性。当key发生变化时&#x…

QT实现Home框架的两种方式

在触摸屏开发QT界面一般都是一个Home页面&#xff0c;然后button触发进入子页面显示&#xff0c;下面介绍这个home框架实现的两种方式&#xff1a; 1.方式一&#xff1a;用stackedWidget实现 &#xff08;1&#xff09;StackedWidget控件在Qt框架中是一个用于管理多个子窗口或…

文件夹名称大小写转换:名称首字母转大写,一种高效的文件管理方法

在日常生活和工作中&#xff0c;电脑文件夹的管理对于提高工作效率和文件检索的便捷性至关重要。文件夹名称的命名规则直接影响到文件组织的有序性和查找的速度。其中&#xff0c;将文件夹名称的首字母转换为大写是一种简单而高效的管理方法&#xff0c;下面我们就来详细探讨实…

Linux提示:mount: 未知的文件系统类型“ntfs”

mount: 未知的文件系统类型“ntfs” 在Linux系统中&#xff0c;如果遇到“mount: 未知的文件系统类型‘ntfs’”的错误&#xff0c;这通常意味着您的系统没有安装支持NTFS文件系统的软件。为了挂载NTFS文件系统&#xff0c;您需要安装ntfs-3g软件包。以下是如何在不同Linux发行…

免费ChatGPT转接地址免费ChatGPT直连地址以及使用方法

依赖环境 Python3.8以上环境 安装依赖包 pip install openai 使用方法-Python #!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2024-05-08 8:56 # Author : Jack # File : chat_direct""" chat_direct """ import openai from…

Golang | Leetcode Golang题解之第76题最小覆盖子串

题目&#xff1a; 题解&#xff1a; func minWindow(s string, t string) string {ori, cnt : map[byte]int{}, map[byte]int{}for i : 0; i < len(t); i {ori[t[i]]}sLen : len(s)len : math.MaxInt32ansL, ansR : -1, -1check : func() bool {for k, v : range ori {if c…

Java基础教程(15)-多线程基础

多线程是Java最基本的一种并发模型;Java语言内置了多线程支持; 进程和线程 进程和线程的关系就是:进程和线程是包含关系;一个进程可以包含一个或多个线程,但至少会有一个线程; 在计算机中,我们把一个任务称为一个进程,浏览器就是一个进程,视频播放器是另一个进程,类…

为什么 ChatGPT 不火了?

不火了是有原因的&#xff0c;下面我来从大部分人拿到 ChatGPT 之后的两大痛点开始讲起&#xff1a; 很多朋友拿到 ChatGPT 后的第一个痛点就是&#xff1a;用的不好 你经常会感觉到 ChatGPT 回答的好空&#xff0c;没有太多参考价值。 而第二个痛点则是&#xff1a;无处去用…

Vue按照顺序实现多级弹窗(附Demo)

目录 前言1. 单个弹窗2. 多级弹窗 前言 强化各个知识点&#xff0c;以实战融合&#xff0c;以下两个Demo从实战提取 1. 单个弹窗 部署按钮框以及确定的方法即可 截图如下所示&#xff1a; 以下Demo整体逻辑如下&#xff1a; 点击“生成周月计划”按钮会触发showWeekPlanDia…