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

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
springboot3打包成war包，用tomcat8启动

springboot3打包成war包，用tomcat8启动

1、在pom中，将打包类型改为war <packaging>war</packaging> 2、pom中排除SpringBoot内置的Tomcat容器并添加Tomcat依赖，用于编译和测试,         *依赖时一定设置 scope 为 provided （相当于 tomcat 依赖只在本地运行和测试的时候有效，         打包的时候会排除这个依赖）<scope>provided
阅读更多...
安装nodejs环境

安装nodejs环境

本文介绍了如何通过nvm(NodeVersionManager)安装和管理Node.js及npm的不同版本，包括下载安装脚本、检查版本并安装特定版本的方法。 1、安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 2、查看nvm版本 nvm --version 3、安装
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2