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

最新推荐文章于 2024-04-07 18:24:15 发布

snailisBigbull

最新推荐文章于 2024-04-07 18:24:15 发布

阅读量570

点赞数

分类专栏： vue 文章标签： npm webpack nodejs

本文链接：https://blog.csdn.net/snailisBigbull/article/details/100013343

版权

原文转发：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.js
                1.2.2.2 各种前端框架介绍
                1.2.2.3 MVVM模式认识
        1.3 Nodejs&Npm安装
            1.3.1 安装NodeJs
            1.3.2 idea中的npm安装
            1.3.3 npm的使用
                ①.创建普通web项目
                ②.命令学习
    二.ECMAScript6
        2.1 es6的认识
        2.2 es6常用语法
            2.2.1 let&const
            2.2.2 解构表达式
            2.2.3 箭头函数
            2.2.4 Promise
            2.2.5 模块化规范
                2.2.5.1 导出功能
                2.2.5.2 导入功能
    三.Vue入门
        3.1 什么是vue
        3.2 el,data与method
            3.2.1 使用Vue三步曲
        3.2.2 Vue的重要元素
            el
            data
            methods
        3.3 vue的钩子方法
            3.3.1 vue的生命周期
            3.3.2 钩子的代码
        3.4 vue的表达式
    四.vue重要指令(顺序调整)
        4.1 v-html与v-text
        4.2 v-for
        4.3 v-bind的使用
        4.4 v-model
        4.4 v-show&v-if
            4.4.1 v-show的案例代表
            4.4.2 v-if的案例
        4.5 v-on 事件绑定
    五.vue小功能
        5.1 计算：computed
            5.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引入相当css
            8.5.3 webpack.config.js
        8.6 热更新web服务器
            8.6.1 安装插件
            8.6.2 添加启动脚本
    九.vue_cli(脚手架)
        9.1 为什么要使用vue_cli
        9.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:5

for (let j = 0; j < 5; j++) {
   
    console.debug(j)
}
console.debug("外部j:"+j); //ReferenceError: j is not defined

    const:声明常量不能修改

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和import
    export命令用于规定模块的对外接口
    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>
</

最低0.47元/天解锁文章

snailisBigbull

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue】Nodejs & npm ECMAScript6 路由 webpack打包 vue_cli(脚手架)

一.前端技术 1.1 课程安排 1.2 前端技术认识(了解一下下) 1.2.1 前端发展历史 1.2.2 新概念解释 1.2.2.1 Node.js 1.2.2.2 各种前端框架介绍 1.2.2.3 MVVM模式认识...
复制链接

扫一扫