2023/9/9总结

lxh0113

已于 2023-09-10 00:45:49 修改

阅读量224

点赞数

文章标签： vue.js 前端

于 2023-09-10 00:16:15 首次发布

本文链接：https://blog.csdn.net/lxh0113/article/details/132510604

版权

nodejs

Node.js 是基于chrome的v8引擎封装，独立执行于JavaScript代码的环境

Node.js环境中没有BOM和DOM

作用：

编写后端程序：提供数据和网页资源等

前端工程化：集成各种开发中使用的工具和技术

fs模块--读写文件

模块：类似于插件，封装了方法/属性

fs模块：封装了于本机文件系统进行交互的，方法/属性

加载 fs 模块对象 const fs = require('fs')

写入文件内容 fs.writeFile('文件路径','文件内容',error=>{})

读取文件内容 fs.readFile('文件路径',(err,data)=>{ //读取后的回调函数，data是文件内容的buffer数据流 })

path 模块 --路径处理

--dirname 内置变量（获取当前模块目录-绝对路径）

path.join() 会使用特定于平台地分隔符，作为定界符，将所有给定地路径片段连接在一起

模块化

定义：CommonJs模块是为Node.js 打包JavaScript 代码的原始方式 Node.js 还支持浏览器和其他JavaScript 运行时使用的ECMAScript 模块标准在Node.js 中，每个文件都被视为应该单独的模块

概念：项目是由很多个模块文件组成的
好处：提高代码复用性，按需加载，独立作用域
使用：需要标准语法导出和导入进行使用

案例

ECMAScript 标准 -- 默认导出和导入

默认标准使用：

导出 export default { }

导入 import 变量名 from ‘模块名或者路径’

Node.js默认支持CommonJs标准语法，如果需要使用ECMAScript 标准语法，在运行模块所在文件夹新建package.json文件，并且设置{“type”:"module"}

ECMAScript标准 -- 命名导出和导入

命名标准使用

导出 export 修饰定义语句

导入 import {同名变量} from ‘模块名或者路径’

包的概念

包：将模块、代码、其他资料聚合成一个文件夹

项目包：主要用于编写项目和业务逻辑
软件包：封装工具和方法进行使用

根目录中，必须有package.json文件 导入软件包时，引入的默认时index.js 模块文件 / main 属性指定的模块文件

npm

是Node.js 标准的软件包管理器 它的起初是作为下载和管理 Node.js 包依赖的方式，现在语句成为前端JavaScript 中使用的工具

初始化清单文件： npm init -y(得到package.json文件，如果有则略过此命令)
下载软件包： npm i 软件包名称
npm -- 全局软件包 nodemon

本地软件包当前项目内使用，封装属性和方法存在于 node_modules

全局软件包本机所有项目使用，封装命令和工具，存在于系统设置的位置

nodemon 作用：替代node命令检测代码更改自动重启程序

使用

安装 npm i nodemon -g (-g 代表安装到全局环境中)

运行 nodemon 待执行的目标js文件

Vue

watch 侦听器（监视器）

作用：监视数据变化，执行一些业务逻辑或者异步操作

语法：

简单写法 ----> 简单类型数据直接监视
完整写法 ---->添加额外配置项

接口还是有点问题

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigBox
        {
            margin-top: 20px;
            display: flex;
        }
        select
        {
            height: 30px;
            width: 60px;
        }
        .left,.right
        {
            height: 100px;
            width: 200px;

        }
        .right
        {
            box-sizing: border-box;

            background: #eee;
            border: 2px solid skyblue;
        }
        .left textarea
        {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            resize: none;
            outline: none;
            border: 2px solid skyblue;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <select name="language" id="">
        <option value="English">英语</option>
        <option value="Chinese">中文</option>
        <option value="French">法语</option>
    </select>

    <div class="bigBox">
        <div class="left">
            <textarea name="" v-model="words" placeholder="请输入你想翻译的句子"></textarea>
        </div>
        <div class="right">
            {{ translateWords }}
        </div>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
<!--    接口地址 -->
    const app=new Vue({
        el:'#app',
        data:{
            words:'',
            translateWords:'',
            timer:null
        },
        watch:{
            words(newValue){
                clearTimeout(this.timer)

                this.timer=setTimeout(()=>{
                    axios({
                        url:'https://translate.appworlds.cn',
                        method:'get',
                        contentType:'application/x-www-form-urlencoded',
                        params:{text:this.words,from:'zh-CN',to:'en'}
                    }).then(result=>{
                        this.translateWords=result.data.data;
                        console.log(result)
                    }).catch(error=>{
                        console.log(error)
                        this.translateWords=error.data
                    })
                },1000)
            }
        }
    })
</script>
</body>
</html>

Vue的生命周期

创建挂载更新销毁

工程化开发脚手架 Vue CLI

Vue CLI 是Vue 官方提供的一个全局命令工具可以班助我们快速创建一个开发Vue项目的标准化基础架子（集成了webpack配置）

安装：需要先安装nodejs 以及 nvm

在windows Power shell 以管理员的身份打开
全局安装：yarn global add @vue/cli 或者 npm i @vue/cli -g
安装后
查看vue 版本 vue --version (如果没有显示版本号，说明你安装出了问题)
创建项目架子 vue create project-name(这里写你想创建的项目名称，不能有中文)
启动项目 yarn serve 或者 npm run serve