【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。

相关文章

HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...
CSS place-items: center解析与用法详解

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性，用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性，用于同时控制 网格(Grid) 和 弹性盒(F
阅读更多...
CSS实现元素撑满剩余空间的五种方法

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中，我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求
阅读更多...
CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性，由Chrome125开始提供原生支持需... 目录 css Anchor Positioning：重新定义「锚定定位」的时代来了！ 什么是 Anchor Pos
阅读更多...
CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关
阅读更多...
HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2