Vue+Node.js+ES6+VScode

最新推荐文章于 2024-04-20 06:13:50 发布
最新推荐文章于 2024-04-20 06:13:50 发布
阅读量342 收藏 1
点赞数 1
分类专栏： 大前端（Vue） 文章标签： vscode node.js vue es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49385823/article/details/120518725
版权

Vue+Node.js+ES6+VScode

一、VScode的使用

1. 安装常用插件
1.Chinese (Simplified) Language Pack for Visual Studio Code ——中文插件
2.Auto Close Tag
3.Auto Rename Tag
4.ESLint
5.HTML CSS Support
6.HTML Snippets
7.JavaScript (ES6) code snippets
8.Live Server
9.open in browser ——打开运行展示到浏览器
10.vue
2. vscode快捷键

ctrl+shift+f 全局搜索

alt+shift+f 格式化代码

二、ES6

1. 简介

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商

协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本

程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且

从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。

它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

每年一个新版本

2.ES6新特性
  1. let 声明变量
    1. var 声明的变量往往会越域 —— let 声明的变量有严格局部作用域 

2. var 可以声明多次 —— let 只能声明一次 

3. var 会变量提升 —— let 不存在变量提升 
console.log(x); // undefined 
var x = 10; 
console.log(y); //ReferenceError: y is not defined 
let y = 20;
  2. const 声明常量（只读变量）
    1. 声明之后不允许改变 
2. 一但声明必须初始化，否则会报错 
const a = 1; 
a = 3; //Uncaught TypeError: Assignment to constant variable.
3. 解构表达式

  1. 数组结构式

    let arr = [1,2,3]; 
//以前我们想获取其中的值，只能通过角标。ES6 可以这样： 
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z);

  2. 对象解构

    const person = { 
  name: "jack", 
  age: 21, 
  language: ['java', 'js', 'css'] 
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 
const { name, age, language } = person; 
// 等价于下面 
// const name = person.name; 
// const age = person.age; 
// const language = person.language; 
// 可以分别打印 
console.log(name); 
console.log(age); 
console.log(language); 
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 
const { name: nn, age, language } = person; console.log(nn); 
console.log(age); 
console.log(language);
4.箭头函数
//以前声明一个方法 
// var print = function (obj) {
// 		console.log(obj); 
// } 
// 可以简写为： 
var print = obj => console.log(obj); 
// 测试调用 
print(100);

//需求，声明一个对象，hello 方法需要对象的个别属性 
//以前的方式： 
const person = { 
  name: "jack", 
  age: 21, 
  language: ['java', 'js', 'css'] 
}
function hello(person) { 
  console.log("hello," + person.name)
}

//现在的方式 
var hello2 = ({ name }) => { console.log("hello," + name) }; 
//测试 
hello2(person);
5.新增API

ES6 给 Object 拓展了许多新的方法，如：

- keys(obj)：获取对象的所有 key 形成的数组

- values(obj)：获取对象的所有 value 形成的数组

- entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1,v1],[k2,v2],...]

- assign(dest, …src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅

拷贝）

6.map 和 reduce

​ 数组中新增了 map 和 reduce 方法。

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3']; 
console.log(arr) 
arr = arr.map(s => parseInt(s)); //把字符串转换成数字类型
console.log(arr)

语法： 
arr.reduce(callback,[initialValue]) 
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元 素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调 用 reduce 的数组。 

callback （执行数组中每个值的函数，包含四个参数） 
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 
2、currentValue （数组中当前被处理的元素） 
3、index （当前元素在数组中的索引） 
4、array （调用 reduce 的数组） 
initialValue （作为第一次调用 callback 的第一个参数。）

示例： 
const arr = [1,20,-5,3]; 
//没有初始值： 
console.log(arr.reduce((a,b)=>a+b));//19 
console.log(arr.reduce((a,b)=>a*b));//-300

//指定初始值： 
console.log(arr.reduce((a,b)=>a+b,1));//20 
console.log(arr.reduce((a,b)=>a*b,0));//-0
7. Promise 异步编排
const promise = new Promise((resolve, reject) =>{ 
  // 执行异步操作 
  if (/* 异步操作成功 */) { 
      resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果 
} else { 
      reject(error);// 调用 reject，代表 Promise 会返回失败结果 
} 
}); 
//这样，在 promise 中就封装了一段异步执行的结果。

处理异步结果
如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。 如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

promise.then(function (value) { 
  // 异步执行成功后的回调 
}).catch(function (error) { 
  // 异步执行失败后的回调 
})

new Promise((resolve, reject) => { 
  $.ajax({ 
    url: "mock/user.json", 
    success(data) { 
      console.log("查询用户：", data); 
      resolve(data.id); 
    },
    error(error) { 
      console.log("出现异常了：" + error); 
    } 
  }); 
}).then((userId) => { 
  return new Promise((resolve, reject) => {
    $.ajax({ 
      url: `mock/user_corse_${userId}.json`,
	  success(data) { 
        console.log("查询到课程：", data); 
        resolve(data.id); 
      },
      error(error) { 
        console.log("出现异常了：" + error); 
      } 
    }); 
  }); 
}).then((corseId) => { 
  console.log(corseId); 
  $.ajax({ 
    url: `mock/corse_score_${corseId}.json`, 
    success(data) { 
      console.log("查询到分数：", data); 
    },
    error(error) { 
      console.log("出现异常了：" + error); 
    } 
  }); 
});
8. Promise优化处理

​ 优化：通常在企业开发中，会把 promise 封装成通用方法，如下：封装了一个通用的 get 请

​ 求方法；

```js

let get = function (url, data) { // 实际开发中会单独放到 common.js 中
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: “GET”,
data: data,
success(result) {
resolve(result);
},
error(error) {
reject(error);
}
});
})
}

// 使用封装的 get 方法，例：
get(“mock/user.json”).then((result) => {
console.log(“查询用户：”, result);
return get(mock/user_corse_${result.id}.json);
}).then((result) => {
console.log(“查询到课程：”, result);
return get(mock/corse_score_${result.id}.json)
}).then((result) => {
console.log(“查询到分数：”, result);
}).catch(() => {
console.log(“出现异常了：” + error);
});
```

9. 模块化

  1. 什么是模块化

    模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先

    导包。而 JS 中没有包的概念，换来的是模块。

    模块功能主要由两个命令构成：export和import。

    • export命令用于规定模块的对外接口。
    • import命令用于导入其他模块提供的功能。

三、Node.js

​ 官方中文文档：http://nodejs.cn/api/

​ 下载官方地址：https://nodejs.org/en/download/

​ 1）、官网下载安装 node.js，并使用 node -v 检查版本

​ 2）、配置 npm 使用淘宝镜像

     ```bash

npm config set registry http://registry.npm.taobao.org/
```

​ 3）、大家如果 npm install 安装依赖出现 chromedriver 之类问题，先在项目里运行下面命令

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

​ 然后再运行

npm install

四、Vue

1. Vue简介

​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不

同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上

手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库

结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

Git 地址：https://github.com/vuejs

尤雨溪，Vue.js 创作者，Vue Technology 创始人，致力于 Vue 的研究开发。

运行流程 
1、 进入页面首先加载 index.html 和 main.js 文件。 
2、 main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的<div id=”app”>元素。使用了 router，导入了 App 组件。并且使用<App/>标签 引用了这个组件 
3、 第一次默认显示 App 组件。App 组件有个图片和<router-view>，所以显示了图片。 但是由于<router-view>代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。 
4、 所以第一次访问，显示图片和 HelloWorld 组件。 
5、 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-link to="/foo">Go to Foo</router-link>标签
2. MVVM 思想
  • M：即 Model，模型，包括数据和一些基本操作
  • V：即 View，视图，页面渲染结果
  • VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）
  • 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染

到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到

Model 中

  • 而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model

和 View 之间是如何互相影响的：

3. Vue.js指令
  1. 第一个Vue程序
a.导入开发版本的Vue.js
b.创建Vue实例对象,设置el属性和data属性
c.使用简洁的模板语法把数据渲染到页面上

  1. el:挂载点

    1.el是用来设置Vue实例挂载（管理)的元素
    2.Vue会管理el选项命中的元素及其内部的后代元素可以使用其他的选择器,但是建议使用ID 3.选择器可以使用其他的双标签,不能使用HTML和BODY

  2. data数据对象

1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时,遵守js的语法即可
  1. v-html 、v-text 、
1.v-html指令的作用是:设置元素的innerHTML , 内容中有html结构会被解析为标签
2.v-text指令无论内容是什么,只会解析为文本
3.解析文本使用v-text,需要解析html结构使用v-html
  1. v-on
例如：<div id="app">
	<button v-on:click="say()">click</button>
         </div>
	<script>
		var vm = new Vue({
			el:app,
			methods:{
				say:function(){
					alert("hello")
				} 
			}
		})
1.v-on指令的作用是:为元素绑定事件事件名不需要写on、
2.指令可以简写为@click="调用的方法"
3.绑定的方法定义在methods属性中
4.事件绑定的方法写成函数调用的形式，可以传入自定义参数
5.定义方法时需要定义形参来接收传入的实参
6.事件的后面跟上.修饰符可以对事件进行限制
7. .enter可以限制触发的按键为回车
  1. v-show
1.v-show指令的作用是:根据真假切换元素的显示状态
2.原理是修改元素的display,实现显示隐藏
3.指令后面的内容,最终都会解析为布尔值
4.值为true元素显示,值为false元素隐藏
  1. v-if
1.v-if指令的作用是:根据表达式的真假切换
2.元素的显示状态本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4.频繁的切换v-show,反之使用v-if,前者的切换消耗小
  1. v-for
1.v-for指令的作用是:根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是( item,index ) in数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上,是响应式的
  1. v-model
1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3.绑定的数据——表单元素的值
4. 侦听（watch）

watch 可以让我们监控一个值的变化。从而做出相应的反应。

5. 过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的

情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

6. 钩子函数

  • beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调 用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是init。

  • created：在创建实例之后进行调用。

  • beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

  • mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在 用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就 是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成三

  • beforeDestroy：该函数将在销毁实例前进行调用 。

  • destroyed：改函数将在销毁实例时进行调用。

  • beforeUpdate：组件更新之前。

  • updated：组件更新之后。

7. vue 模块化开发
1、npm install webpack -g 
全局安装 webpack 

2、npm install -g @vue/cli-init 
全局安装 vue 脚手架 

3、初始化 vue 项目； 
vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目

4、启动 vue 项目； 
项目的 package.json 中有 scripts，代表我们能运行的命令 
npm start = npm run dev：启动项目 
npm run build：将项目打包
8. 项目结构
目录文件说明
build项目构建（webpack）相关代码
config配置目录，包括端口号
node_modulesnpm install 加载的项目依赖模块
src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets:放置一些图片,如logo等。 components:目录里面放了一个组件文件,可以不用。 App.vue:项目入口文件，我们也可以直接将组件写这里,而不使用components目录。main.js:项目的核心文件。
static静态资源目录、如图片、字体等
index.html首页入口文件
package.json项目配置文件

五、Babel

Babel 是一个 JavaScript 编译器，我们可以使用 es 的最新语法编程，而不用担心浏览器兼

容问题。他会自动转化为浏览器兼容的代码

六、Webpack

自动化项目构建工具。gulp 也是同类产品

华婷深深
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vscode-debug-nodejs-es6, 如何使用VSCode调试 ES6 NodeJS.zip
09-17
vscode-debug-nodejs-es6, 如何使用VSCode调试 ES6 NodeJS vscode-debug-nodejs-es6如何使用VSCode调试 ES6 NodeJS 先决条件VSCode: http://code.visualstudio.com/NodeJS: https://nodejs.o
nodejs+es6+vue脚手架
qq_28988639的博客
06-01 529
第1章 NodeJS 1 学习目标： 掌握Node.js基本使用方法，理解模块化编程 掌握包资源管理器NPM的使用 说出webpack的作用 掌握ES6常用的新特性语法 vue-cli 脚手架 Element-UI 组件库 2 Node.js 2.1 什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaS...
vscode调试node es6
yhy_的博客
08-12 177
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动程序", "program": "${
vscode 使用ES6调试js
qq_43203949的博客
12-06 1648
vscode使用node.js调试，默认是不支持ES6语法的，所以解决方案也十分简单，对ES6语法进行转换即可。对ES6语法转换我们可以通过babel这个js编译器对ES6语法进行转换即可。Babel 是一个 JavaScript compiler，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+（ES6） 代码转换为 JavaScript 向后兼容版本的代码。安装babel十分简单，使用npm进行安装即可 修改package.json 在package.json中添加以下两个选项，
Vue.js入门 3_ES6和Node基础
抹不去你留下的唇印的博客
12-27 315
第1天ES6和Node基础 每日目标 了解 Nodejs 与浏览器中 JavaScript 的区别 掌握 Nodejs 模块使用的基本步骤 能够使用 npm 安装和卸载模块 理解本地安装与全局安装的区别 掌握 gulp 构建工具的基本使用 ES6 学习资料：http://es6.ruanyifeng.com/ ECMA（European Computer Manufacturers Association ）和 W3C 类似，主要负责制订和规范语言标准，所学的 JavaScript 就是在 ECMA
Node.js零基础入门到高级进阶
07-28
Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript进行服务器端编程，打破了传统的客户端脚本语言限制。本教程旨在帮助初学者从零基础开始，逐步掌握Node.js，直至达到高级进阶水平...
vue+element-ui通用后台管理系统（适合新手）
07-17
- `babel.config.js`：Babel的配置文件，用于将ES6+的代码转换成兼容老版本浏览器的JavaScript代码。 - `vue.config.js`：Vue CLI项目的配置文件，可以自定义Vue CLI服务的配置，如端口、代理等。 - `package-lock....
前端 + vue胡静啦啦啦境配置
04-22
总结起来，Vue.js的环境配置涉及Node.js和Vue CLI的安装，项目模板的创建，依赖的安装，以及VSCode中的插件配置和代码片段设置。这些步骤将帮助你建立一个高效、便捷的Vue开发环境。通过熟悉这些基础知识，你可以更...
FrontEnd-Wiki：前端Wiki，学习JavaScript，Vue.js，Node.js，其他信息等
02-04
综上所述，"FrontEnd-Wiki"是一个集成了JavaScript、Vue.js、Node.js等前端技术的学习资源库。通过这个Wiki，你可以系统地学习前端开发的各种知识，从基础到进阶，从理论到实践，为你的前端开发之路提供有力的支持。
手把手讲解Vue + Element UI实现后台管理系统(一)：搭建开发环境源代码
04-18
确保已经安装了Node.js，因为Vue CLI（命令行工具）依赖于它。通过运行以下命令全局安装Vue CLI： ```bash npm install -g @vue/cli ``` 接下来，创建一个新的Vue项目。使用Vue CLI生成项目模板： ```bash vue ...
elementUi+vue+node+express+mongodb简易学生成绩管理系统
08-07
elementUi+vue+node+express+mongodb简易学生成绩管理系统,简易版，可以用来学习
(配置学习前必备)node.js在vscode调试以及插件和cnpm设置
SquirrelPineal的博客
07-25 3905
vscode需要安装的插件 JavaScript/node.js 在vscode需要安装的插件 beautify 美化插件 JavaScript (ES6) code snippets ES6/JavaScript插件 VSCode Great Icons 图标插件 Path Intellisense 路径提示，再import的时候会跳出 Better Align 对齐插件 ...
vscode前端软件安装及ES6新特性使用
qq_61104892的博客
02-23 1335
vscode下载地址 官网下载：https://code.visualstudio.com/ 安装教程 鼠标左键双击，即可运行安装程序 一：同意协议 二：选择安装路径 VSCode默认安装在C盘，可点击浏览选择安装的位置 三：选择创建VSCode的快捷方式并进行下一步安装 四、安装完成 安装完成后桌面上将出现该VSCode的快捷方式 五、配置VSCode常用插件 在插件商店下载配置插件，安装中文插件包后需点击重启运行VSCode 六、第一...
VSCODE编辑器常用插件推荐
最新发布
2401_84094620的博客
04-20 808
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取[外链图片转存中…(img-ephFrvj1-1713564754463)][外链图片转存中…(img-f8WZCxnX-1713564754463)][外链图片转存中…(img-GscVXVYB-1713564754463)]
JavaScript
h1776842314的博客
06-22 893
JavaScript学习笔记+jQuery
vscode vue es6语法配置检测
热门推荐
晓风揽月
11-16 2万+
话说，为了配置vscode，es6语法自动检测，百度的各种攻略，踩坑不少，最重要还没用。。。。。。将最后解决的方法分享大家，共同进步！ 配置方法： 1. 插件下载 ESLint，JavaScript(ES6) code snippets 打开vscode —点击右侧扩展商店—搜索框输入es,找到以下2个插件，ESLint，JavaScript(ES6) code snippets 分别点击安...
前端项目配置启动 node +vue +es6
暴走的皮皮虾博客
04-14 1501
Vue 项目启动 配置
vscode之调试es6代码
12-08 4263
vscode不支持es6的代码调试，但是可以通过babel把es6代码转成es5之后，在进行调试。 步骤如下： 第一步： 在本地项目路径下npm init，之后会生成一个package.json文件 第二步： 之后再执行 本地安装babel命令行工具 -- 每个项目安装一个，尽量不要在全局安装一个babel。 npm install --save-dev babel-cli ...
翻译：在vscode中调试es6
07-11 367
原文：How to debug ES6 NodeJS with VSCode – katopz – Medium 快速实践 先上项目：katopz/vscode-debug-nodejs-es6: How to debug ES6 NodeJS with VSCode 使用vscod...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

华婷深深

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值