Vue笔记--高级入门

Vue-cli

什么是vue-cli

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能

●统一的目录结构（类似我们的maven）
●本地调试
●热部署
●单元测试
●集成打包上线

所需环境

Node.js Git

这里就不做安装这些环境的介绍了，安装完之后我们可以用node -v查看版本是否安装成功

安装淘宝镜像加速器

npm install cnpm -g

安装的位置: C: \Users \Administrator\AppData\Roaming\npm

安装vue -cli

cnpm install vue-cli -g

测试是否安装成功，查看可以基于那些模板创建vue应用

vue list

第一个vue-cli程序

1.进入我们的目录，要用管理员身份

2.vue init webpack myvue 初始化项目

至此我们的vue项目创建完成，接下来进入我们的myvue路径

3.安装依赖环境 npm install

4.启动我们的项目 npm run dev

启动成功

目录结构

其中就是前段vue开发的模板，详细配置可以自行搜索参考

端口配置在config文件夹的index.js中

主入口index.html

webpack

什么webpack

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle.
Webpack是当下最热门门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS.AMD、ES6、CSS、JSON. CoffeeScript. LESS 等;

我们平常使用JS导入的方式是

这是最原始的JavaScript文件加载方式，如果把每- -一个文件看做是一个模块,那么他们的接口
通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是-一个作用域。
这种原始的加载方式暴露了一些显而易见的弊端:
●全局作用域下容易造成变量冲突 $什么的会被重载污染
●文件只能按照

CommonsJS

服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来
同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

reuire(" module ")
require(". ./module.js");
export.doStuff = function() {};
module . exports = somevalue ;

优点:
●服务器端模块便于重用
●NPM中已经有超过45万个可以使用的模块包
●简单易用

缺点:
●同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
●不能非阻塞的并行加载多个模块

实现:
●服务端的NodeJS
●Browserify, 浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大
●modules-webmake,类似Browserify,但不如Browserify 灵活
●wreq, Browserify的前身

AMD

Asynchronous Module Definition规范其实主要一个主要接口 define(id?,dependencies?, factory);它要在声明模块的时候指定所有的依赖dependencies,并且还要当做形参传到factory中，对于依赖的模块提前执行。

define("module", ["dep1", "dep2"], function(d1, d2) {return someExportedvalue;
});
require(["module", ". ./file.js"], function(module, file) {});

优点
●适合在浏览器环境中异步加载模块
●可以并行加载多个模块

缺点
●提高了开发成本,代码的阅读和书写比较困难，模块定义方式的语义不畅
●不符合通用的模块化思维方式，是一种妥协的实现
实现
●RequireJS
●curl

ES6

EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS和AMD模块，都只能在运行时确定这些东西。

import "jquery";
export function doStuff() {}
module "localModule" {}

优点
●容易进行静态分析
●面向未来的EcmaScript标准
缺点
●原生浏览器端还没有实现该标准
●全新的命令，新版的NodeJS才支持

举个简单的例子

"use strict";  <1--使用严格检查-->
let i = "hello world";   正常
u = "hello world";       错误  编译的时候就爆出错误

安装webpack

npm install webpack -g       + webpack@5.10.3
npm install webpack-cli -g      + webpack-cli@4.2.0

配置

创建webpack . config. js配置文件
●entry: 入口文件,指定WebPack用哪个文件作为项目的入口
●output: 输出，指定WebPack把处理完成的文件放置到指定路径
●module:模块，用于处理各种类型的文件
●plugins: 插件,如:热更新、代码重用等
●resolve: 设置路径指向
●watch: 监听，用于设置文件改动后直接打包

使用webpack

1.创建我们的项目=====>空文件夹

2.创建modules文件夹

补充ES6语法

hello.js 暴露方法

//暴露一个方法
exports.sayHi = function () {document.write("<h1>狂神说ES6</h1>")
};

main.js 主入口函数

var hello = require("./hello");
hello.sayHi();

当然我们的hello.js可以暴露很多方法，这样我们的前端就可以模块化开发了，前端工程化开发诞生！！！

3.测试打包

ERROR in main
Module not found: Error: Can't resolve './src' in 'E:\学习文件\课外技术学习\笔记\前端\代码\webpac
k-study'

错误原因：我们的打包js文件名错误：webpack.config.js写成了webpack–config.js

打包成功

4.创建我们的主页面index测试

只需引入

补充说明：

webpack – –watch 用于监听变化

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset ./js/bundle.js 215 bytes [compared for emit] [minimized] (name: main)
./modules/main.js 47 bytes [built] [code generated]
./modules/hello.js 100 bytes [built] [code generated]
webpack 5.10.3 compiled successfully in 247 ms
[webpack-cli] watching files for updates...说明正在监听

一旦我们的js发生变化他会重新打包，比如我们的sayHi输出wqh学Vue，那么它自动会重新打包，也就是我们说的热部署，开发完东西立马发生变化

vue-router路由

Vue Router是Vue.js官方的路由管理器。他和Vue.js核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

●嵌套的路由/视图表
●模块化的、基于组件的路由配置
●路由参数、查询、通配符
●基于Vue.js过渡系统的视图过渡效果
●细粒度的导航控制
●带有自动激活的CSS class的链接
●HTML5历史模式或hash模式，在IE9中自动降级
●自定义的滚动条行为

组件化，比如导航，列表详情页等等都是路由，我们只需要让中间内容改变

安装

在当前项目下安装

cnpm install vue-router --save-dev在我们的main.js中导入
import VueRouter from 'vue-router'
显示声明使用VueRouter
Vue.use(VueRouter);

然后我们正常运行一下npm run dev我们会发现我们是动态修改网页内容的，不用刷新就能改变页面内容，也就是我们的热部署