【vue】Nodejs npm ECMAScript6 路由 webpack打包 vue_cli(脚手架)

2024-01-21 02:50
文章标签 javascript vue 路由 npm nodejs 打包 frontend webpack cli 脚手架 ecmascript6

本文主要是介绍【vue】Nodejs npm ECMAScript6 路由 webpack打包 vue_cli(脚手架)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文转发：https://note.youdao.com/ynoteshare1/index.html?id=cf9a910bb3b4ab2a54af029e898bd6ad&type=note
vue：官网
https://cn.vuejs.org

   一.前端技术1.1 课程安排1.2 前端技术认识(了解一下下)1.2.1 前端发展历史1.2.2 新概念解释1.2.2.1 Node.js1.2.2.2 各种前端框架介绍1.2.2.3 MVVM模式认识1.3 Nodejs&Npm安装1.3.1 安装NodeJs1.3.2 idea中的npm安装1.3.3 npm的使用①.创建普通web项目②.命令学习二.ECMAScript62.1 es6的认识2.2 es6常用语法2.2.1 let&const2.2.2 解构表达式2.2.3 箭头函数2.2.4 Promise2.2.5 模块化规范2.2.5.1 导出功能2.2.5.2 导入功能三.Vue入门3.1 什么是vue3.2 el,data与method3.2.1 使用Vue三步曲3.2.2 Vue的重要元素eldatamethods3.3 vue的钩子方法3.3.1 vue的生命周期3.3.2 钩子的代码3.4 vue的表达式四.vue重要指令(顺序调整)4.1 v-html与v-text4.2 v-for4.3 v-bind的使用4.4 v-model4.4 v-show&v-if4.4.1 v-show的案例代表4.4.2 v-if的案例4.5 v-on 事件绑定五.vue小功能5.1 计算：computed5.1.1 直接在表达式中计算5.1.2 使用计算的方案5.2 watch监控属性六.组件6.1 全局组件6.1.1 初始写法6.1.2 抽一抽(效果一样)6.2 局部组件6.3 组件模块6.3.1 template标签模板6.3.2 script标签模板6.3.3 外部js七.路由八.webpack打包【了解】8.1 基本认识8.1.1 打包认识8.1.2 webpack认识8.2 安装webpack本地安装：全局安装：8.3 准备工作8.3.1 新建一个module项目8.3.2 初始化项目8.3.3 准备相应的模块8.4 打包命令8.5 CSS加载8.5.1 加载器安装8.5.2 a.js引入相当css8.5.3 webpack.config.js8.6 热更新web服务器8.6.1 安装插件8.6.2 添加启动脚本九.vue_cli(脚手架)9.1 为什么要使用vue_cli9.2 vue_cli快速上手其它切换npm的镜像单词学习

一.前端技术

1.1 课程安排

认识前端，安装NodeJs与npm
ES6的语法学习
Vue的学习

1.2 前端技术认识(了解一下下)

能看到的都是前端，如web,android,ios等

1.2.1 前端发展历史

在这里插入图片描述

1.2.2 新概念解释

1.2.2.1 Node.js
前端可开发后端(仅限于小型应用)
异步风格深受开发人员喜爱
NPM 全称为Node Package Manager作为node.js的包管理系统
使用场景：
允许用户获取第三方包并使用。
允许用户将自己编写的包或命令行程序进行发布分享。NPM是Node提供的模块管理工具，可方便的下载安装很多前端框架相当于咱们后端的Maven
1.2.2.2 各种前端框架介绍
基于node涌现出大量前端框架(如下图)

在这里插入图片描述

##1.2.2.3 MVVM模式认识

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在这里插入图片描述

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。 把开发人员从繁琐的DOM操作中解放出来，
把关注点放在如何操作Model上.

1.3 Nodejs&Npm安装

node自带npm（安装了node也就有npm了）

1.3.1 安装NodeJs

官方网站查找下载 https://nodejs.org/en/download/
下载后直接安装(傻瓜式,不解释)

在这里插入图片描述

安装后测试确定环境变量中是否有nodejs的配置输入命令 node -v ：查看node的版本输入命令 npm -v : 查看npm的版本

在这里插入图片描述

输入命令 npm install npm@latest -g        升级npm

在这里插入图片描述

1.3.2 idea中的npm安装

在这里插入图片描述

安装后重启idea
在idea下方的Teminal即可输入命令

在这里插入图片描述

1.3.3 npm的使用

maven中我们有pom.xml,而在npm中我们有package.json

①.创建普通web项目

在这里插入图片描述
②.命令学习

初始化命令npm init ->初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)npm init -y ->初始化(跳转确定信息)

在这里插入图片描述

安装命令
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(安装项目可以使用)
npm install/i vue
在这里插入图片描述

npm install/i vue

在这里插入图片描述

其它命令查看某个模块：npm list vue
列表模块(查看所有模块)：npm ls
卸载模块：npm uninstall vue
更新模块：npm update vue
运行工程：npm run dev/test/online -> 平时运行使用(需要配置,现在无法执行)
编译工程：npm run build -> 上线时需要进行编译(编译完扔到服务器中运行)

二.ECMAScript6

2.1 es6的认识

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范
ES6就是现在最新的JS语法
后期更多使用年号来做版本(ES2017,ES2018,...)

2.2 es6常用语法

2.2.1 let&const

let:用来声明变量。它的用法类似于var(但是声明的变量只在 let 命令所在的代码块内有效。)代码块有效不能重复声明没有变量提升

/*var的测试结果,在循环外部可以获取但；是let是无法获取的,let更加符合我们java对于一个变量的定义
*/
for (var i = 0; i < 5; i++) {console.debug(i);
}
console.debug("外部i:"+i); //外部i:5for (let j = 0; j < 5; j++) {console.debug(j)
}
console.debug("外部j:"+j); //ReferenceError: j is not definedconst:声明常量不能修改const val = "abc";
val = "bcd"; //invalid assignment to const `val'

2.2.2 解构表达式

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，
这被称为解构（Destructuring）。

解构变量赋值

//以前变量赋值
let a = "张三";
let b = "李四";
let c = "王五";
console.debug(a,b,c);
//使用解构变量赋值
let [a,b,c] = ["张三","李四","王五"]
console.debug(a,b,c);

数组解构

let arr = ["哪吒","金吒","木吒"];
let [a,b,c] = arr;
console.debug(a,b,c);

对象解构

let person = {name:"哪吒",age:12};
//把person对象中的值根据名称直接赋值给name与age两个属性
let {name,age} = person;
console.debug(name,age);

2.2.3 箭头函数相当于咱们Java中的lambda表达式

案例一 :原生函数与箭头函数

箭头函数中，小括号是参数，大括号是函数体
如果函数体只有一句，大括号可以省略

//定义普通函数
function say() {console.debug("我是一个中国人...")
}
say();
//定义箭头函数
//也可以写成: var hi=()=>console.debug("我是一个中国人...");
var hi = ()=>{console.debug("我是一个中国人...")
}
hi();

案例二 : 带参数的函数

function say(name) {console.debug(name);
}
say("小张");
//小括号中是传参，大括号中是函数体
var hi = (name) =>{console.debug(name);
}
hi("小李");

案例三 : 对象中添加相应的参数

var person = {//ES5的写法say:function(name){},//使用箭头函数的写法say:name=>{},//最简写法 -> 当时是我最喜欢的写法啦say(name){}
};

案例三 : 解构与箭头函数的混用

//定义一个常量
const person = {name:"小哪吒",age:12
}
//传统方案
function say(person){console.debug("name="+person.name);
}
say(person);
//解构+箭头方案
// 这个地方小括号代表接收参数，小括号中的大括号就代表对传过来的对象进行解构
var hi =({name})=>{console.debug("name="+name);
}
hi(person);

2.2.4 Promise

异步编程的解决方案(比传统的解决方案更加强大)
Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件
我们可以在Promise中封装一个异步请求的结果注:以后咱们会使用axios(更加的简单啦)，它是对Promise的底层的封装，
大家可以先简单理解为就是咱们原生Ajax与JQuery封装后的区别

/*** 直接创建出这个对象* @type {Promise<any>}*      resolve：解决  reject:废品; 拒绝;*/
var promise = new Promise(function (resolve, reject) {//5秒钟后会执行相应的代码，模块咱们Ajax请求用了5秒setTimeout(()=> {let number = Math.random();if(number>0.5){resolve("成功的兄弟");}else{reject("失败的哥们")}},5000)
});
//成功执行then中的代码，失败执行catch中的代码
promise.then(function (msg) {console.debug(msg);
}).catch(function(err){console.debug(err);
})

2.2.5 模块化规范

简单理解，有这个概念即可,现在这个功能浏览器还不支持，我们无法测试
模块化就是把代码拆分,可以重复利用
模块化是一种思想,前端有很多规范可以实现这种思想commonJs:nodeJS中的实现方案amd/cmd:可以在浏览器中直接实现ES6：可以在浏览器中直接实现
ES6咱们使用两个命令构成：export和importexport命令用于规定模块的对外接口import命令用于导入其他模块提供的功能
2.2.5.1 导出功能
导出代·码

//定义一个变量(对象)
const util ={add(a,b){return a+b;}
}
//导出这个变量(对象)
export util;导出代码简写形式//直接导出相应的变量
export const util ={add(a,b){return a+b;}
}

在这里插入图片描述

可以导出任何东西(基本类型,函数,数组,对象)

var name = "小张";
var age = 34;
export {name,age}可以省略名称export default {add(a,b){return a+b;}
}
2.2.5.2 导入功能

导入代码

//导入util(注:如果导入的是default关键字导出,这个util的名称随便取)
import util from 'hello.js'
//调用util中的方法
util.add(3,4)

批量导入

//批量导入前面导出的name和age
import {name,age} from 'user.js'
console.debug(name,age);

在这里插入图片描述

三.Vue入门

3.1 什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API - - - 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。

Vue的特点轻量Vue.js库的体积非常小的，并且不依赖其他基础库。数据绑定对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。指令内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。插件化Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。组件化组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

Vue的历史

Vue是比较新的技术，版本 1.0 是在 2014 年发布的, Vue作者是前Google 的员工尤雨溪, 在2016年9月宣布以技术顾问的身份加盟阿里巴巴。 Vue对比其他框架:https://cn.vuejs.org/v2/guide/comparison.html#ad

3.2 el,data与method

3.2.1 使用Vue三步曲

引入Vue.js
准备被挂载的元素：->一个div容器
JS完成挂载->   new  一个Vue  el完成挂载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello vue!!!</title><!-- ①.引入vue的js文件:有vue的功能支持 --><script src="vuejs/vue.js"></script>
</

这篇关于【vue】Nodejs npm ECMAScript6 路由 webpack打包 vue_cli(脚手架)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/628146。

相关文章

将Java程序打包成EXE文件的实现方式

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》：本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
PyInstaller打包selenium-wire过程中常见问题和解决指南

PyInstaller打包selenium-wire过程中常见问题和解决指南

《PyInstaller打包selenium-wire过程中常见问题和解决指南》常用的打包工具PyInstaller能将Python项目打包成单个可执行文件,但也会因为兼容性问题和路径管理而出现各种运... 目录前言1. 背景2. 可能遇到的问题概述3. PyInstaller 打包步骤及参数配置4. 依赖
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2