SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

news2024/12/22 19:20:38

🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 基于脚手架创建前端工程

        1.1 基于 Vue 开发前端项目的环境要求

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

        1.2.2 使用图形化来创建前端工程

        1.3 启动、停止项目

        1.4 前端项目中的重点文件

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        2.2 文本插值

        2.3 属性绑定

        2.4 事件绑定

        2.5 双向绑定

        2.6 条件渲染

        2.7 Axios

        2.7.1 axiox 创建的 API 与配置代理

        2.7.2 使用 axiox.post() 方法来发送请求 

        2.7.3 使用 axios.get() 方法来发送请求

        2.7.4 vue 统一使用方式 - axiox

        2.7.5 完整代码

        1.0 基于脚手架创建前端工程

        基于脚手架可以快速的创建前端工程，让开发者可以更快速地开始实际开发工作。脚手架工具提供了一些预设的配置选项和常用的功能模块，开发人员可以根据项目需求选择适合的模板和插件，并生成一个完整的项目结构。

        除了创建项目，脚手架工具还通常提供了一些命令来帮助开发人员进行开发、构建和部署等操作，例如启动开发服务器、打包代码、进行代码检查等功能，大大提高了开发效率。

        1.1 基于 Vue 开发前端项目的环境要求

        1）node.js：前端项目的运行环境。

        2）npm：JavaScript 的包管理工具。

        3）Vue CLI：基于 Vue 进行快速开发的完整系统，实现交互式的项目脚手架。

使用以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，您可以通过以下命令来验证 Vue CLI 的安装是否成功：

vue --version

运行结果：

C:\Users\86187>vue --version
@vue/cli 5.0.8

        1.2 前端工程创建的方式

        1.2.1 基于命令的方式来创建前端工程

在命令框中输入：

vue create 项目名称

举个例子：

        首先，在没有中文的路径下创建前端工程：

        接着，输入 vue create 项目名称：

        需要注意的是，包名中包含非 URL 友好字符，例如空格、特殊符号等，就会出现错误。npm 的包名必须是 URL 友好的，只能包含小写字母、数字和连接符（-）。如果包名中包含其他字符，就会触发该错误。还要注意的是，最后不需要用 ";" 结尾。

        再接着，选择 Vue2 来创建前端工程项目：

        最后出现以下结果，则说明创建成功了。

        该路径下就会出现前端项目的文件夹。 

        1.2.2 使用图形化来创建前端工程

vue ui

举个例子：

        首先在命令框中输入：vue ui

        接着，就会跳转到以下网页：

        点击 vue-project 下拉框，再点击 Vue 项目管理器：

        再跳转到以下页面：

        点击创建项目：

        选择 Vue2 来创建：

        最后，文件中就会出现 vue-project1 文件夹了。

        1.3 启动、停止项目

        使用 VS code 来启动项目：

        在终端输入：npm run serve，这样前端工程就启动起来了。

        control + 点击左键连接就可以进入前端网页了：

        使用 control + c 来结束前端工程项目：

        1.4 前端项目中的重点文件

        1）node_modules：当前项目依赖的 js 包

        2）assets：静态资源存放目录

        比如说要展示的图片或者视频、音频之类的资源，都可以存放在该目录中。

        3）components：公共组件存放目录

        存放的公共的资源。这个文件夹中存放的是在整个应用中都会用到的通用性组件，比如按钮、输入框、模态框等。这些组件可以被多个页面或模块共享使用，有利于代码的复用和维护。

        4）App.vue：项目的主组件，页面的入口文件

        5）main.js：整个项目的入口文件

        6）package.json：项目的配置信息、依赖包管理

        7）vue.config.js：vue-cli 配置文件

        配置项目中的信息。

        比如说：前端项目启动后，服务端默认为 8080，很容易和后端 tomcat 端口号冲突。如何修改前端服务的端口号？

        这就可以通过 vue.config.js 文件来配置前端端口号：

        记得保存修改之后的信息，关闭前端服务之后，再来重新启动前端服务：

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        Vue 的组件文件以 .vue 结尾，每一个组件由三部分组成：

        1）<template>：结构，只有一个元素，由它生成 HTML 代码。

        2）<style>：样式，编写 css ，控制页面展示效果。全局样式：影响所有组件；局部样式：只作用于当前组件。

        3）<script>：逻辑，编写 js 代码，控制模板的数据来源和行为。

举个例子：

        在前端工程中，已经存在 vue 组件，如：App.vue 、HelloWorld.vue 组件文件：

        都是由结构、样式、逻辑三个部分组成。

        2.2 文本插值

        用来绑定 data 方法返回的对象属性，通过 {{}}  来使用。

代码演示：

运行结果：

        页面展示的结果：

        2.3 属性绑定

        为标签的属性绑定 data 方法中返回的属性。

        用法：v-bind:xxx，简写为 :xxx 。

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳手",
      age: 22,
    
    };
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面的展示结果：

        2.4 事件绑定

        为元素绑定对应的事件。

用法：v-on：xxx，简写为 @xxx 

代码演示：

网页展示的结果：

        2.5 双向绑定

        表单输入项和 data 方法中的属性进行绑定，任意一方改变都会同步给另一方。

用法：v-model

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");
    },
    change(){
      this.name = "小扳手"
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

        当要从页面表格中改变 name 的值：从表单输入项改变

        从 data 方法中改变：点击 “点击改变name的值”按钮

        2.6 条件渲染

        根据表达式的值来动态渲染页面元素。

用法：v-if、v-else、v-else-if 

代码演示：

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


    <div v-if="sex == 1">男生</div>
    <div v-else-if="sex == 2">女生</div>
    <div v-else>未知</div>


  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      sex: 1
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");
    },
    change(){
      this.name = "小扳手"
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面展示结果：

        2.7 Axios

        Axios 是一个基于 promise 的网络请求库，作用于浏览器和 node.js 中。

需要深入了解可以点击该连接：请求配置 | Axios中文文档 | Axios中文网 (axios-http.cn)

安装命令：

        在终端输入命令进行安装：

npm install axios

        就会出现在 package.json 文件中：

        接着导入 axios 包：

import axiox from 'axios'

        2.7.1 axiox 创建的 API 与配置代理

axiox 的 API 列表常见的请求方式：

        1）axiox.get(url[,config])：url 表示请求路径，config 表示配置对象，可以设置查询参数、请求头信息。

        2）axiox.post(url[,data[,config]])：url 表示请求路径，config 表示配置对象，可以设置查询参数、请求头信息，data 表示请求体数据，最常见的是 JSON 格式数据。

配置代理：

        为了解决跨域问题，可以在 vue.config.js 文件中配置代理。

代码演示：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api' : {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

        配置完代理后，就可以给后端发送请求了。

        2.7.2 使用 axiox.post() 方法来发送请求 

代码演示：

        绑定了一个发送请求的方法，使用 axiox.post() 方法来发送 post 类型的请求给后端，执行成功后，会自动调用 then() 方法。

        点击发送请求：

抓包结果：

        成功获取来后端返回来的数据。

        后端也成功接收到了前端发送过来的请求：

        2.7.3 使用 axios.get() 方法来发送请求

        可以用到的参数有 url 、config 。

代码演示：

sentGet(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
        axiox.get("/api/admin/employee/1",{
          headers: {
            token: ret.data.data.token
          }
        }).then(ret => {
          console.log(ret.data)
        })
      })
      
    }

        绑定发送 get 请求的方法，先获取到 token 字段的值，再将 token 字段的值设置为发送 get 的请求的请求头 token 的字段值。最后请求发送成功之后，获取返回回来的数据。

抓包结果：

        先发送 post 请求获取到令牌：

        再发送 get 请求：

        2.7.4 vue 统一使用方式 - axiox

        只有 url 是必需的。如果没有指定 method ，请求将默认使用 get 方法。

        使用方式：axiox(config) 

        method：指定请求的方法。

        url：指定请求的路径。

        data：post 请求中存放发送请求体的内容。

        params：get 请求中存放参数信息。

        headers：配置请求头中的消息。

代码演示：

        发送一个 post 请求：

      axiox({
        method: "post",
        url: '/api/admin/employee/login',
        data: {
            username: "admin",
            password: "123456"
        }
      }).then(ret => {
        alert(ret.data.data.token)
      })

        发送一个 get 请求：

axiox({
        method: 'get',
        url: '/api/admin/employee/1',
        headers: {
          token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"
        },
        params: {
          id: 1
        }
      }).then(ret => {
        console.log(ret.data)
      })

        2.7.5 完整代码

<template>
  <div class="hello">
      {{name}} {{age}} <br>

      <!-- 具体书写的方式 -->
      <input type="text" v-bind:value="name"> <br>

      <!-- 简写的方式 -->
      <input type="text" :value="age"> <br>
     
     <!-- 详细的方式 -->
     <input type="button" value="保存1" v-on:click="handleSave" /> 
     <!-- 简写的方式 -->
     <input type="button" value="保存2" @click="handleSave" /> <br>


    <!-- 直接从表单中改变name -->
     <input type="text" v-model="name" /> <br>

    <!-- 在script中改变named值 -->
    <input type="button" value="点击改变name的值" @click="change"/>


    <div v-if="sex == 1">男生</div> 
    <div v-else-if="sex == 2">女生</div> 
    <div v-else>未知</div>  <br>

    <br>
    <input type="button" value="发送post请求" @click="sentPost" />

    <input type="button" value="发送get请求" @click="sentGet" />

    <input type="button" value="发送统一方式请求" @click="sent1" />

    <input type="button" value="发送统一方式请求" @click="sent2" />

  </div>
</template>

<script>
import axiox from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: "小扳",
      age: 22,
      sex: 1
    };
  },
  methods: {
    handleSave(){
      alert("点击保存");

    },
    change(){
      this.name = "小扳手"
    },
    sentPost(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
      })
    },
    sentGet(){
      axiox.post("/api/admin/employee/login",{
        username: "admin",
        password: "123456"
      }).then(ret => {
        console.log(ret.data)
        axiox.get("/api/admin/employee/1",{
          headers: {
            token: ret.data.data.token
          }
        }).then(ret => {
          console.log(ret.data)
        })
      })
      
    },
    sent1(){
      axiox({
        method: "post",
        url: '/api/admin/employee/login',
        data: {
            username: "admin",
            password: "123456"
        }
      }).then(ret => {
        alert(ret.data.data.token)
      })
    },
    sent2(){
      axiox({
        method: 'get',
        url: '/api/admin/employee/1',
        headers: {
          token: "eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE4ODY0MjI5fQ.ZMmX2z6VP5WNotBuq0SpG8UwFe0ZCxj0icoVA2T2ltU"
        },
        params: {
          id: 1
        }
      }).then(ret => {
        console.log(ret.data)
      })

    }



  }
  

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

最新源支付系统源码 V7版全开源 免授权 附搭建教程

最新源支付系统源码 V7版全开源 免授权 附搭建教程

简介&#xff1a; 最新源支付系统源码_V7版全开源_免授权_附详细搭建教程_站长亲测 YPay是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。它采用全新轻量化的界面UI&#xff0c;让您能更方便快捷地解决知识付费和运营赞助的难题。同时&#xff0c;…
阅读更多...
【服务器04】之【Navicat连接阿里云】

【服务器04】之【Navicat连接阿里云】

通过前三篇文章&#xff0c;现在我们测试可以连接数据库了 点开桌面的 接下找来的主机 地址在以下 登录阿里云 登陆账号后 点击控制台 输入RDS 弹出新页面&#xff0c;并点击运行中的 1 点管理 复制外网地址 鼠标靠近就会出现复制图标 用户名 和 密码 是注册阿里云的高权限账…
阅读更多...
Cocos引擎加密方案解析

Cocos引擎加密方案解析

据2023年数据显示&#xff0c;Cocos引擎全球游戏市场的占有率约为20%&#xff0c;国内手游占有率约为40%&#xff0c;在国内手游市场中&#xff0c;不少热门游戏均为Cocos引擎研发&#xff0c;如《捕鱼达人》、《梦幻西游》、《剑与远征》等。 而在近年来国内火热的小游戏赛道…
阅读更多...
Linux内核开发-替换内核

Linux内核开发-替换内核

0.前言 上一章&#xff08;点击返回上一章&#xff09;提到如何编译内核源码&#xff0c;本章主要介绍如何将编好的内核替换已有的内核。 1. 替换内核 第1步&#xff1a;查看当前内核版本 cat /proc/version第2步&#xff1a; 查看机器上的内核信息 grep menuentry /boot/…
阅读更多...
北森发布2024中国企业校园招聘白皮书，解读校招5大核心要素

北森发布2024中国企业校园招聘白皮书，解读校招5大核心要素

随着新一轮技术革命和产业变革的到来&#xff0c;市场竞争日益加剧&#xff0c;企业也正面临着前所未有的挑战与机遇。在这一变革的新时代&#xff0c;人才成为企业在竞争中保持优势、稳步发展的关键因素。当下&#xff0c;青年人才正以其敏锐的时代感知、创新思维和敏捷的新技…
阅读更多...
如何在springboot项目中引入knife4j接口文档

如何在springboot项目中引入knife4j接口文档

开发框架&#xff0c;帮助后端开发人员做后端接口测试 knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案 引入依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId>&…
阅读更多...
Java基础16（集合框架 List ArrayList容器类 ArrayList底层源码解析及扩容机制）

Java基础16（集合框架 List ArrayList容器类 ArrayList底层源码解析及扩容机制）

目录 一、什么是集合&#xff1f; 二、集合接口 三、List集合 四、ArrayList容器类 1. 常用方法 1.1 增加 1.2 查找 int size() E get(int index) int indexOf(Object c) boolean contains(Object c) boolean isEmpty() List SubList(int fromindex,int …
阅读更多...
UniApp 开发微信小程序教程（二）：下载安装微信开发者工具

UniApp 开发微信小程序教程（二）：下载安装微信开发者工具

文章目录 一、微信开发者工具简介二、下载安装微信开发者工具1. 下载微信开发者工具步骤&#xff1a; 2. 安装微信开发者工具Windows 系统&#xff1a;Mac 系统&#xff1a; 3. 配置微信开发者工具登录微信开发者工具&#xff1a;新建项目&#xff1a; 4. 预览和调试预览&#…
阅读更多...
电商还存在错位竞争空间吗？

电商还存在错位竞争空间吗？

“上链接试了&#xff0c;十几分钟&#xff0c;成本5块的东西卖1块5了。”今年618前期&#xff0c;某个电商平台上线了自动跟价功能&#xff0c;有一个卖家尝试了一会儿之后赶紧关了。 又一个618&#xff0c;平台、商家、消费者们又迎来了一次狂欢。只是与往年不同的是&#x…
阅读更多...
从2-3-4树开始理解红黑二叉树（JAVA代码手撸版）

从2-3-4树开始理解红黑二叉树（JAVA代码手撸版）

经典的红黑二叉树在新增/删除数据时维持自平衡始终对应着一个2-3-4 树。本文只关注2-3-4 对应的经典红黑二叉树。 暂时不考虑 2-3 树对应的左倾红黑二叉树。 背景知识 2-3-4 树简介 一棵 2-3-4 树的结点分为 内部结点 (internal nodes) 和 叶子结点 (leaf nodes) &#xff0c;…
阅读更多...
KVB交易平台：国内三大交易所（上海、深圳、北京）的概要与分析

KVB交易平台：国内三大交易所（上海、深圳、北京）的概要与分析

概述&#xff1a; 上海证券交易所&#xff08;上交所&#xff09;、深圳证券交易所&#xff08;深交所&#xff09;和北京证券交易所&#xff08;北交所&#xff09;是中国大陆三大主要证券交易所。以下是对这三个交易所的比较分析&#xff1a; 一、基本概况 1. 上海证券交易所…
阅读更多...
零基础入门AI：四步快速搭建本地的编程助手

零基础入门AI：四步快速搭建本地的编程助手

由于种种原因&#xff0c;小伙伴们在写代码时&#xff0c;不一定能用上Github Copilot&#xff1b;或者由于代码安全的原因&#xff0c;不能使用外网的编程助手。今天我就介绍一种利用开源大语言模型在本地搭建编程助手的方案&#xff1a; IDE插件&#xff1a;Continue本地开源…
阅读更多...
DB9母头接口定义485

DB9母头接口定义485

在通信技术中&#xff0c;DB9接口广泛应用于串行通信&#xff0c;尤其是在RS232和RS485标准中。虽然DB9接口最常见于RS232通信&#xff0c;但通过适当的引脚映射&#xff0c;它也可以用于RS485通信。本文将详细介绍如何定义和使用DB9母头接口进行RS485连接。 DB9母头接口简介 …
阅读更多...
探索FlowUs息流：个人和团队知识管理解决方案｜FlowUs稳定保障你的笔记安全无忧

探索FlowUs息流：个人和团队知识管理解决方案｜FlowUs稳定保障你的笔记安全无忧

FlowUs息流&#xff1a;稳定运营保障你的笔记安全无忧 在知识管理工具的选择上&#xff0c;稳定性是用户最关心的问题之一。FlowUs息流以其稳定的运营记录&#xff0c;为用户提供了一个可靠的工作环境。我们深知&#xff0c;一个知识管理平台的稳定性直接影响到团队的生产力和…
阅读更多...
echarts引入百度地图vue3（大屏项目中缩放点偏移到左上角，解决代码在最后）

echarts引入百度地图vue3（大屏项目中缩放点偏移到左上角，解决代码在最后）

实际开发中的问题&#xff0c;遇到了大屏做了自适应&#xff0c;为非标准文档流之后&#xff0c;在缩放时不是以鼠标当前位置缩放的&#xff0c;而是偏移到左上角。 向百度地图提了工单也没解决&#xff0c;同一套适应方案用cesium地图时缩放没问题&#xff1a; 先看看效果&am…
阅读更多...
动态规划——达拉崩吧

动态规划——达拉崩吧

1、题目链接 174. 地下城游戏 2、题目分析 假如说我们正向推状态转移方程&#xff0c;很难推出来&#xff0c;因为这道题有“加血”的说法&#xff0c;只能依靠后面的值判断前面所需要的血量&#xff0c;也就是说&#xff0c;如果正向的dp表示从起点出发&#xff0c;到达&…
阅读更多...
CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】

CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】

目录 一、目的与优势二、CSS导入方式三、语法结构四、选择器类型基本选择器组合选择器伪类与伪元素属性选择器 六、选择器优先级总结 六、CSS属性1. 字体与文本属性2. 背景属性3. 尺寸与盒模型属性4. 布局与定位5. 列表样式6. 边框与轮廓7. 文本装饰与效果8. 动画与过渡9. 伪类…
阅读更多...
多模块存储器

多模块存储器

随着计算机技术的发展&#xff0c;处理的信息量越来越多&#xff0c;对存储器的速度和容量要求也越来越高&#xff1b;而且随着CPU性能的不断提高、IO设备数量不断增加&#xff0c;导致主存的存取速度已经称为了整个计算机系统的性能瓶颈。这就要求我们必须提高主存的访问速度。…
阅读更多...
Linux基础命令大全（详解版）

Linux基础命令大全（详解版）

Linux基础命令&#xff08;详解版&#xff09; 文章目录 Linux基础命令&#xff08;详解版&#xff09;1.Linux的目录结构**2.Linux路径的描述方式**3.Linux命令基础格式4.ls命令 隐藏文件、文件夹5.pwd命令6.cd命令 特殊路径符7.mkdir命令 文件操作命令8.touch命令9.cat命令10…
阅读更多...
package.json简介

package.json简介

1、package.json简介 通过 npm init 初始化一个项目&#xff0c;会生成3个目录/文件&#xff0c; node_modules, package.json和 package.lock.json。其中package-lock.json文件是为了锁版本。 2、package.json常用属性 1&#xff09;name name是项目的名称&#xff0c;命名…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023