这一部分听的我迷迷糊糊的，安装了一万个包

vue-cli

Vue项目的脚手架,帮我们生成vue的工具

npm install vue-cli -g
vue init webpack <项目名字>
cd 项目名字
npm install
npm run dev

弹出Your application is running here: http://localhost:8080，打开这个网址，Welcome to Your Vue.js App，就成功了
反正这个随便查都有，我以前安完了

模块

node.js中有个require，前端并不支持

规范：

• node模块的规范commonjs
• cmd seajs amd require
• umd 为了做兼容处理的
• esmodule
  • 如何定义模块（一个js就是一个模块）
  • 如何导出模块 （export）
  • 如何使用模块（import）

export

一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果希望外部能够读取模块内的某个变量需要使用export输出该变量。

export let str1="大白熊";
export let str2="小熊";

这个js文件会将str和str2放在一个对象中导出 {str1:"大白熊"，str2:"小熊"}

import

其他JS文件可以通过import命令加载定义好的文件。
变量的引入与ES6结构赋值相似，形式要与输出的相同都是对象

import {str1,str2} from "./a.js"

1. 在另一个文件中将内容解构出来才能用
2. 不能再次声明str1和str2 import拥有声明功能
3. import会被提升到顶部执行

由于如果模块中有多少对象就import出来多少实在比较麻烦，所以使用以下方法导出

import * as b from './a.js'
console.log(b.str1,b.str2);

注意要使用变量的时候不能直接使用str1和str2

或者使用default
导出时，将变量放在 export default里，引入时使用

export default {a:1，b:2};

default为对象形式

引入时

import x from './b.js'

x代表的是default后的结果

webpack

webpack是一块模块加载器兼打包工具，最终打包为静态文件

下载与配置

1. 下载

npm init -y
npm install webpack  --save-dev

安装webpack最好不要安装全局，否则可能导致webpack的版本差异

2. 新建一个文件webpack.config.js
3. 在package.json中配置一个脚本，这个脚本用的命令是webpack。回去当前的node_moudules下找bin对应的webpack名字让其执行，执行的就是bin/webpack.js，webpack.js需要当前目录下有个名字叫webpack.config.js的文件。我们通过npm run build执行的目录是当前文件的目录.

总之就是这个

image.png

4. 将之前的模块放在新建的src文件夹中

   
   
   image.png

5. webpack.config.js
   webpack必须采用commonjs的写法

let path=require('path')
//node.js中专门处理路径用的
module.exports={
  entry:"./src/main.js",
  //打包的入口文件，webpack会自动查找相关的以来进行打包
  output:{
    filename:'bundle.js',
    //打包后的名字
    path:path.resolve('./dist')
    //解析路径，以当前路径解析一个绝对路径
    //必须是一个绝对路径
   //或者path=__dirname+'dist'
  }
}
//把main打包放在bundle.js然后再放到dist文件夹里

6. npm run build
7. 形成一个dist文件夹，里面有一个bundle.js文件，将commonjs文件转换为浏览器能够识别使用的js文件
8. 多入口打包，就在entry里多写几个就好了，然后将file那么改为'[name].js'

babel转译ES6

npm install babel-core babel-loader --save-dev

1. node_modules不是我们编的，所以不进行转译
2. -js pipei所有的js 用babel-loader进行转译
3. 给webpack添加新的属性

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
    ]
  }

npm run build

5. 报错 反正我报了
   Cannot find module '@babel/core'
   然后我

npm un babel-core
npm install --save-dev @babel/core

6. 重新npm run build
7. 完成
8. 但是我们发现依然使用的let（ES6专用变量），需要再安一个插件
   让翻译官拥有解析ES6语法的功能，babel/preset-es2015已经不用了，我用了总是报错

npm install @babel/preset-env --save-dev

9. 新建文件.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

10.npm run build

解析样式和图片

写了这么多，大概了解了webpack解析的基本步骤

1. 下载需要的解析包
2. 再webpack配置文件中告诉它，某一种文件要用哪一种方式进行解析
   3.main.js中引入

css-loader将css解析为模块，将解析内容插入style标签内（style-loader）

npm install css-loader style-loader --save-dev

webpack配置文件中添加

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']}]}

main.js中

import './index.css'

使用的时候是从右往左的，两个loader的顺序不能改变

less,sass,stylus（css云处理语言，增加了变量，混合，函数，运算等)

• less-loader less css-loader style-loader
• sass-loader
• stylus-loader
  我们用less

npm install less less-loader --save-dev

webpack配置文件中添加

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
  }

main.js

import './style.less'

图片解析

• file-loader
• url-loader 依赖于file-loader,所以改配置文件的时候只需要写url-loader即可

npm install url-loader file-loader --save-dev

webpack配置

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      //使用的时候是从右往左的，两个loader的顺序不能改变
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader'}
    ]
  }

我们会发现buddle.js中有超级长的一段，那就是图片的解析，但是这样会使得js太大，所以我们让bas24只在8K以下转化，其他情况下输出图片

  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      //使用的时候是从右往左的，两个loader的顺序不能改变
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}
    ]
  }

引入图片

webpack不会进行查找，所以再main.js中写以下代码并没有作用

let img=new Image()
img.src='./2.jpg'

因为打包到后面之后，url并没有改，在dick文件夹，它并不存在
webpack引入图片需要import,或者线上路径"

import page from './2.jpg'

page就是打包后的图片路径

html插件解析

用一个插件，将我们自己的html为模板将打包后的结果，自动引入到html中产出到dist目录下

npm install html-webpack-plugin --save-dev

webpage的更改

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
  entry:"./src/main.js",
  output: {
    filename: 'bundle.js',
    path: path.resolve('./dist'),
  module:{
    rules:[
      {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}
    ]
  },
  plugins:[
    [new HtmlWebpackPlugin({
      template:'./src/index.html'
    })]
]
}

1. new HtmlWebpackPlugin方法会自动产生html文件并且放入disk文件夹中
2. template是我们使用的模板
3. 产出的名字默认与模板相同，如果在模板下加filename:'login.html'就可以产出不同名字的html
4. 模板什么也不必写，插件会自动将解析的内容放在body的最下方

webpack-dev-server

这里面内置了服务，可以帮我们启动一个端口号，当代码更新时，可以自动打包（内存中打包），代码有变化就重新执行

npm install webpack-dev-server --save-dev

然后在package.json中的脚本改为

  "scripts": {
    "build": "webpack",
    "dev":"webpack-dev-server"
  }

端口号默认为8080*

npm run dev

打开http://localhost:8080/，就是我们的网页
改变之前写下的内容，实时网页变化

在模块中用Vue

现在开始不再html中写Vue了，我好恋恋不舍啊，但是模板中最重要的就是div，通过div的id，绑定Vue实例

1. 安装Vue

npm install vue

2. 引入Vue
   使用import, 在main.js中

import Vue from 'vue'

- 使用了没有./的形式，所以是第三方模块
- 这样引用直接引用Vue，引用的并不是vue.js,引用的是Vue的runtime
- vue=compiler+runtime（compiler可以编译模板）

3. 万能代码

new Vue(
{
el:"#app"，
template:'<div>hello</div>
})

4. 出问题了
   因为用的是runtime, 无法使用template，有两种解决办法
   1. 使用complier，将import部分改为

import Vue from 'vue/dist/vue.js';

但是complier有6K，浪费空间，所以可以选择使用其他的方法
2. 把模板放在render函数中

new Vue(
{
el:"#app"，
    render:function(createElement){
      return createElement('h1','hello')
    }
})

render有一个参数createElement

createElement

参数

1. 标签
2. 数组，在这个数组中，先是第一个标签内的内容，然后重新写createElement()创建新的内容，由此可以推断这个数组就是第一个标签包含的内容

import Vue from 'vue/dist/vue.js';
//这样引用直接引用Vue，引用的并不是vue.js,引用的是Vue的runtime
//vue=compiler+runtime（compiler可以编译模板）
new Vue(
  {
    el:"#app",
    render:function(createElement){
      //返回什么创建什么，只有两个参数的情况下，第一个参数是标签，第二个是内容，
      // 如果有三个，第三个是子组件，是一个数组，然后在里面重新写createElement()
      return createElement('h1',['hello',createElement('span','大白熊')])
    }
  })

render函数的作用是将虚拟DOM渲染成真实的dom
createElement返回的是虚拟的dom

组件

现在组件是.vue格式的文件

先来复习组件都有什么

1. template
2. data(){}
3. methods:{}
   4.computed:{}
   5.components:{}

.vue需要新加的几点

1. 在模块化中，想要导出，必须要export
2. 为每个组件自己定义一个style，利用html提供的scoped可以做到

<template>
<div>
<h1>hello</h1>
</div>
</template>
<script>
  export default{
    data() {
      return
    },
    methods:{

    },
    computed:{

    },
    components:{

    },
  }
</script>
<style scoped>
  </style>

vue-loader vue-template-compiler

• vue-loader解析.vue文件
• vue-template-compiler 解析vue模板
  vue会自动调用vue-compiler，用的时候只用vue-loader
  loader会迟到，但不会缺席

VueLoaderPlugin

Vue-loader在15.0.0之后有问题，需要在配置文件中添加一些东西
首先，在module.export外添加

let VueLoaderPlugin=require('vue-loader/lib/plugin')

然后在plugins部分添加

 new VueLoaderPlugin()

渲染组件

将createElement的参数改为APP

import Vue from 'vue/dist/vue.js';
import App from './App.vue';
new Vue(
  {
    el:"#app",
    render:function(createElement){
      return createElement(App)
    }
  })