Vue系列笔记3

发表于
字数统计 2k | 阅读时长 7

学习参考：coderwhy教学视频，整个系列可能会比较混乱，学到哪里觉得有需要的记录一下，可能和之前的java笔记类似。

  1. 同一个项目中可能有多个js，这样就存在全局变量重名的问题，虽然通过函数闭包可以解决，但是又导致了不同js之间代码不可复用，所以就有了模块化的概念；
  2. 常用的模块化规范：CommonJS、AMD、CMD、ES6的Modules;
  3. CommonJS导出写法：
1
2
3
4
5
6
7
//aaa.js
modules.exports = {
	//要导出的部分
	flag,
	sum,
	……
}

CommonJS导入写法:

1
var/let {flag,sum} = require('./aaa.js')
  1. ES6的modules：首先在html代码中要引入js文件，并且类型设置为module，然后在要导出的js文件中使用export指令导出模块对外提供的接口，在要引入的js文件中通过import命令来加载。
  2. 遇到本地Ajax跨域报错Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.原因在于使用了File协议，应该使用它提示的http, data, chrome, chrome-extension, https这些协议。使用webstorm或是visual studio这种重量级的IDE，应该不会遇到这种问题，这类IDE都内置了HTTP服务器。针对VSCode，可以安装Live Server插件，这个插件功能十分强大，不止可以解决ajax不支持file协议的问题，还可以实现在编辑器里保存修改后，页面自动刷新的功能。
  3. 什么是webpack，从本质上讲，webpack是一个现代的JavaScript应用的静态模块打包工具，分两点来讲，就是模块和打包。webpack其中一个核心就是让我们可以进行模块化开发，并且帮助我们处理模块间的依赖关系；打包就是将webpack中的各种资源模块进行打包合并成一个或多个包，并且在打包过程中，还可以对资源进行处理，例如压缩图片，ES5转成ES6等；

  1. grunt/gulp的核心是Task，更加强调的是前端流程的自动化，模块化不是它的核心；webpack更加强调模块化的开发管理，而grunt/gulp的文件压缩合并、预处理、转换等功能只是它附带的功能；

  2. webpack为了正常运行，必须依赖node环境，node环境为了可以正常执行很多代码，其中必须包含各种依赖的包，为了便于安装管理这些包，需要npm（node package manager）工具。

  3. 全局安装webpack

    1
    npm install webpack@3.6.0 -g

    但是一般情况下，每个项目都要局部安装自己所对应需要的webpack

    1
    2
    3
    4
    npm install webpack@3.6.0 --save-dev
    //--save-dev安装的是开发时依赖，而不是运行时依赖，这个安装完成后在package.json可以看出来
    //–save 将依赖包名称添加到 package.json 文件的 dependencies 键下
    //–save-dev 则添加到 package.json 文件的 devDependencies 键下

    然后需要在npm init创建的package.json中加入，

    1
    "build": "webpack"

    这样，在终端输入npm run dev即可，而且优先使用本地webpack而非全局。

  4. loader是webpack中一个非常核心的概念，webpack可以处理JS代码和相互之间的依赖，但在开发中，不仅仅有基础的JS代码，还有CSS、图片加载、将高级的ES6转化为ES5等，此时就需要给webpack扩展对应的loader：

  • 通过npm安装所需要的loader
  • 在webpack.config.js中的modules关键字中进行配置
  • 具体安装什么loader可以在webpack官方文档进行查询

  1. plugin时webpack中另一个重要的核心，webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等，loader主要用于转换某些类型的模块，它是一个转换器，plugin是插件，它是对webpack本身的扩展，是一个扩展器。

  2. webpack配置文件的分离，再weback.config.js中，许多配置只是在开发中用到，在实际发布时并不需要，所以最好将这些配置抽离出来，便于后期管理：

  • 创建base.config,js/dev.config.js/prod.config.js，将weback.config.js中内容进行分离，npm install webpack-merge –save-dev安装js合并工具，接下来
1
2
3
4
5
6
7
8
9
10
//dev.config.js
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = WebpackMerge(baseConfig,{
    devServer: {
      contentBase: './dist',
      inline: true
    }
})

  • 在package.json中指定一下

    1
    "build": "webpack --config ./build/prod.config.js",

  1. 使用vue开发大型项目，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等，为了提高效率，通常会用到一些脚手架工具来帮助完成，CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架。使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

  2. e2e–>e to e –>end to end

  3. Vue CLI2新建项目

1
vue init webpack my-project

  1. 脚手架安装了ESlint如何关闭：config==>index==>useEslint改为false，重新编译一下项目;

  2. Vue程序运行过程

    • runtime-compiler—>代码中可以有template
    1
    2
    3
    4
    5
    6
    7
    // template -> ast -> render -> vdom -> UI
    //main.js
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })
* runtime-only--->代码中不可以有任何的template，性能更好，代码量更少，少6KB。


1
2
3
4
5
6
// render -> vdom -> UI
//main.js
new Vue({
  el: '#app',
  render: h => h(App)
})


​
  1. npm run build/dev具体执行示意

1570934287208

  1. Vue CLI3 创建项目
1
vue create my-vue-project

  1. Vue CLI3管理配置文件及其他可以通过vue ui命令启动GUI界面进行可视化管理；

    Vue CLI3的配置文件其实并不是没有，而是“隐藏”起来了，在node_modules->@vue->cli-service;

    若要修改，可在工程目录下创建vue.config.js：

    1
    2
    3
    module.exports = {

    }

    会自动将手动的配置和默认的配置进行合并。

  2. 前端渲染和后端渲染/前端路由和后端路由：

  • 早期，服务器收到URL通过正则进行匹配，交给Controller进行处理，利用JSP等技术，直接生产渲染好对应的HTML页面，不仅有html、css，还有获取数据的java代码，返回给客户端进行展示，这就是后端渲染，在后端处理URL和页面之间的映射关系，即后端路由；
  • 随着Ajax出现，有了前后端分离的开发模式，客户端通过URL发起请求，去静态资源服务器请求资源，请求回的资源包括html+css+js，前两者浏览器进行渲染，js浏览器执行，执行到API接口时，再去请求提供API接口的服务器，请求回之后由其他js代码进行处理，这就是前端渲染；
  • 再发展就是单页面富应用阶段，最主要的特点就是在前后端分离的基础上加了一层前端路由，整个网站只有一个html页面，浏览器向静态资源网站请求时将所有资源全部请求下来，前端路由监听浏览器，当URL改变，就将请求的全部资源进行抽离但不进行页面整体刷新也就是不再进行新的请求，显示该显示的部分，也就是一个网页，这种一个URL和一个网页的映射就是前端路由；
  1. 如何改变URL而页面不刷新呢？有两种方法，一种为利用URL的hash，另一种为html5的history模式。
1
2
3
4
//Console
>location.hash = 'foo'
>history.pushState({},'','foo') //这个push有点类似于入栈，history.back()或者history.go(-1)或者history.forward()或者浏览器返回类似于出栈
>history.replaceState({},'','foo')//很明显，相比于上，这个直接是代替

注：转载文章请注明出处，谢谢~