vue学习笔记(2)

Webpack

网页中常用的静态资源

• js
  • .js .jsx [.coffee .ts]，[中间语言，需进一步编译才能使用]
• css
  • .css .less .sass .scss
• image
  • .jpg .png .gif .bmp .svg
• 字体
  • .svg .ttf .eot .woff .woff2
• 模板文件
  • .ejs .jade .vue

网页中引用静态资源多了有什么问题

加载速度慢，因为有很多二次请求

要处理错综复杂的依赖关系

webpack

webpack: 前端项目构建工具，基于node.js开发的前端工具

文档：https://www.webpackjs.com/

下载：npm i webpack -g

在项目中打包js： webpack 要打包的文件路径 打包好的输出文件路径 版本高，

			webpack 要打包的文件路径   -o  打包好输出的文件路径

配置文件: webpack.config.js

var path = require('path');

// 配置之后 就不用使用 webpack ./src/main.js -o ./disk/bundle.js 来打包文件了，直接使用 webpack
// 工作机制
// 1.webpack 发现，没有通过命令的方式 指定入口和出口
// 2.会去文件根目录查找 webpack.config.js 文件
// 3.当找到这个文件之后，webpack 会执行解析这个配置文件，得到配置文件中导出的对象
// 4.webpack 拿到对象后就拿到了配置文件中的入口和出口，然后进行打包构建
// 暴漏一个对象
module.exports = {
    mode: 'production',
    // 在对象中定义一个入口和出口
    // 入口文件就是要打包的那个文件
    entry: path.join(__dirname, './src/main.js'),
    // 出口文件是打包之后要使用的文件
    output: {
        path: path.join(__dirname, './disk'), // 指定打包文件输出到哪个目录
        filename: 'bundle.js' // 指定输出文件名称
    }
};

bug锦集

bug
// 在使用webpack 打包的时候
// We will use "npm" to install the CLI via "npm install -D".
// Do you want to install 'webpack-cli' (yes/no): yes
// Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
// 选哟安装 webpack-cli
// npm install webpack-cli -g

==========================================================

// 当 npm init -y 失败，报错 npm ERR! Invalid name时
// 在"name"字段中不允许使用 大写字母、空格和中文 package.json。文件名字不能是中文
  
  
==========================================================
// 当 webpack .\src\main.js .\disk\bundle.js 报错
// ERROR in multi ./src/main.js ./disk/bundle.js Module not found: Error: Can't resolve '.\disk\bundle.js' in 'D:\HBuilder\sublime\vue\05\05webpack'  @ multi ./src/main.js ./disk/bundle.js main[1]
// 把命令更换为 webpack src\main.js -o disk\bundle.js
  
==========================================================
// 执行打包时遇到警告

// WARNING in configuration
// The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enabl
// e defaults for each environment.
// You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

//版本高，需要配置
// 这是没有配置环境的原因!
//
// 解决方案:在package.json文件中添加.
// "scripts": {
//   "dev": "webpack --mode development",
//   "build": "webpack --mode production"
// },
// 在webpack中写
//  mode: 'production',
==========================================================
  
webpack.config.js 一定要在根目录xia
报错
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\HBuilder\sublime\vue\06\01-webpack-demo'

ERROR in multi (webpack)-dev-server/client?http://localhost ./src
Module not found: Error: Can't resolve './src' in 'D:\HBuilder\sublime\vue\06\01-webpack-demo'
 @ multi (webpack)-dev-server/client?http://localhost ./src main[1]

安装webpack-dev-server

安装： npm i webpack-dev-server -D 只能安装在项目中，不是全局安装

• 只能安装在项目中，所以直接使用 webpack-dev-server 命令在终端上会出错，因为终端上的命令是全局的
• 这个工具事务用法和 webpack 的一样
• 需要在本地项目中也下载 webpack, 因为依赖于 webpack

配置：

• 在 package.json 中配置

  • webpack-dev-server 不在全局安装，可以在终端上使用命令
  • –open 自动打开浏览器
  • –port 3000 改变端口号为3000
  • –contentBase src 默认打开src目录
  • –hot 热更新【可以局部打包文件形成补丁，页面实现不刷新改变】
    “scripts”: {
    “start”: “webpack-dev-server --open --port 3000 --contentBase src --hot”,
    “test”: “echo “Error: no test specified” && exit 1”
    },

• 在 webpack.config.js 中配置

  • 首先在 packsge.json 中 配置 “start”: “webpack-dev-server”

  • open: true, // 自动打开浏览器

  • port: 3000, // 更改端口号为 3000

  • contentBase: ‘src’, // 默认打开src

  • 配置热更新

    • hot: true // 配置热更新第一步
    • var webpack = require(‘webpack’); // 配置热更新第二步
    • plugins: [new webpack.HotModuleReplacementPlugin() // new 一个热更新模块对象 第三步]

    var webpack = require(‘webpack’); // 配置热更新第二步

    module.exports = {
    mode: ‘production’,
    // 在对象中定义一个入口和出口
    // 入口文件就是要打包的那个文件
    entry: path.join(__dirname, ‘./src/main.js’),
    // 出口文件是打包之后要使用的文件
    output: {
    path: path.join(__dirname, ‘./disk’), // 指定打包文件输出到哪个目录
    filename: ‘bundle.js’ // 指定输出文件名称
    },
    devServer: {
    open: true, // 自动打开浏览器
    port: 3000, // 更改端口号为 3000
    contentBase: ‘src’, // 默认打开src
    hot: true // 配置热更新第一步
    },
    plugins: [
    new webpack.HotModuleReplacementPlugin() // new 一个热更新模块对象 第三步
    ]

    };

html-webpack-plugin

安装： npm i --save-dev html-webpack-plugin 在内存中生成htm页面

使用：

在webpack.config.js中配置

// 导入 html-webpack-plugin 在内存中生成 html 页面
var htmlWebpackplugin = require('html-webpack-plugin');

// 只要是插件，就要在plugins中配置
plugins: 
        // 配置 html-webpack-plugin
        new htmlWebpackplugin({ // new 一个在内存中生成 HTML 页面的插件
             template: path.join(__dirname, './src/webpackNew.html'), // 指定模板页面，根据指定页面的路径
            filename: 'index.html' // 生成的内存中的页面
        })
    ]

作用：

// 1.可以在内存中生成 html 页面
// 2.自动把打包好的 js 文件追加到 html 页面中

配置引用css ——style-loader , css-loader

webpack 默认只能打包 js 类型的文件，无法处理其他非js类型的文件

// 报错
// ERROR in ./src/css/commen.css 1:6
// Module parse failed: Unexpected token (1:6)
// You may need an appropriate loader to handle this file type.
// > ul,li {
// |     list-style: none;
// | }
// 如果要处理非js的文件，需要下载第三方加载器
// css 安装 style-loader 和 css-loader

webpack 处理非js类型文件的过程

// 1.如果不是 js类型的文件，就去找相关的第三方 loader

// 2.找到规则，去调用对应loader处理这种文件类型

// 3.调用loader的时候，从后往前调用

// 4.最后一个loader调用完毕会把结果返回给 webpack 进行打包合并

下载：npm i style-loader css-loader

配置：webpack.config.js

// 配置所有第三方加载器
module: {
    rules: [ // 所有第三方加载器匹配规则
        {test: /\.css$/, use: ['style-loader', 'css-loader']} // 匹配 css
    ]
}

引用：入口文件 main.js

import './css/commen.css' 

配置引用图片和字体图标

下载： npm i file-loader url-loader

// 匹配图片
            // limit: 单位字节 图片的字节数超过设置的字节数，图片路径不会转为base64位
            // name=[hash:8]-[name].[ext0] 设置名字不会被编码，还是之前的名字，前边的hash数防止名字重复图片只显示一个
            {test: /\.(jpg|png|gif|bmp|svg)$/, use: ["url-loader?limit=657057&name=[hash:8]-[name].[ext0]"]},
            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'}

配置bable

下载：

• npm install [email protected] @babel/core @babel/preset-env
• npm install --save-dev @babel/plugin-transform-runtime
• npm install --save @babel/runtime
• npm install --save-dev @babel/plugin-proposal-class-properties

配置1： 打开配置文件 webpack.config.js 在module属性中的rules 中添加新的匹配规则

• {test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/}
• 一定要写排除node_modules
• 如果不排除会把node_modules中的第三方包全部重新打包编译，消耗cpu，速度慢
• 还会出错

配置2：在项目的根目录中，新建一个 .bablerc 的Babel 配置文件，这个配置文件属于 json 格式

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/transform-runtime"
  ]
}

注意： @babel/preset-env 包含所有的 es*** 相关得到语法

webpack 警告

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (274 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web perfor
mance.
Entrypoints:
  main (274 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

//解决方式一
// 在webpack.config.js中添加
performance: {
 
hints:false   
 
}
//方式二
//在webpack.config.js中添加
performance: {
    hints: "warning", // 枚举
    maxAssetSize: 30000000, // 整数类型（以字节为单位）
    maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
    // 提供资源文件名的断言函数
    return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    
    }
},

webpack- vue总结

webpack中如何使用 vue

• 安装 vue 的包： npm i vue -s
• 安装可以识别 .vue 的文件的第三方loader ：npm i vue-loader vue-template-compiler -D
• 在 main.js 中，导入 vue 模块：import Vue from ‘vue’
• 在webpack.config.js 中，配置 vue.js 的引用 resolve: { alias: { ‘vue$’: ‘vue/dist/vue.js’, }},
• 定义一个以 .vue 结尾的组件，由三部分组成 template, script , style
• 在main.js 中，导入这个组件 :import login from ‘./login.vue’
• 创建 vm 的实例 ： var vm = new Vue({})
• 在 webpack.config.js中配置loader的使用 var VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
  new VueLoaderPlugin()
• 在页面上创建一个 id 为 app 的 div 元素，作为 vm 实例控制的区域

webpackVue-router总结

webpack中使用vue的router

• 安装路由 npm i vue-router
• 在main.js中导入路由 import VueRouter from ‘vue-router’,
• 手动安装 Vue.use(VueRouter)
• 创建路由 var router = new VueRouter({routes:[{}]})
• 挂载 router: router

把路由从main.js中抽离

es6 中导入导出

es6 导入语法

• import 模块组件名称 from ‘模块标识符’
• import ‘路径’

es6 导出语法

• export default info
• export var title = “aaa” =按需到处

注意：

• export default 向外暴漏的成员，可以使用任意变量来接受
• 在一个模块中 export default 只能使用一次，暴漏一个成员
• 在一个模块中可以同时使用 export default 和 export【按需导出】导出成员
• export【按需导出】向外暴漏的成员，只能使用 {} 接受
• export【按需导出】可以导出多个成员，接受的时候，在 {} 中用逗号隔开
• export【按需导出】接受时成员名字和导出的必须一样，但是可以使用 ，导出的名字 as 新名字来修改

vue render

替换 el 所指定的容器

• createElements 是一个方法，调用方法能把指定组件模板渲染位HTML结构

• return createElements(login); // 返回的结果可以替换 el 指定的那个容器

  var login = {
  template: ‘

  还有一个h1,被替换掉了啦。render 渲染的组件

  ’
  };

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        render: function (createElements) { // createElements 是一个方法，调用方法能把指定组件模板渲染位HTML结构
            return createElements(login); // 返回的结果可以替换 el 指定的那个容器
        }
    })
  

Vue和Mint UI

mint UI 官网 https://cloud.tencent.com/developer/section/14899615

安装 ：npm i mint-ui -S

按钮的使用

全局安装

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);

安装组件

import { Button } from 'mint-ui'
Vue.component(Button.name, Button);

简短提示框的使用

• import { Toast } from ‘mint-ui’;
• 基本用法
  Toast(‘提示信息’);

使用

Toast({
  message: '提示',
  position: 'bottom',
  duration: 5000
});

执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast

let instance = Toast('提示信息');
setTimeout(() => {
  instance.close();
}, 2000);

参数 说明 类型 可选值 默认值
message 文本内容 String
position Toast 的位置 String ‘top’‘bottom’‘middle’ ‘middle’
duration 持续时间（毫秒），若为 -1 则不会自动关闭 Number 3000
className Toast 的类名。可以为其添加样式 String
iconClass icon 图标的类名 String

mui

下载：npm install --save muicss

导入：

npm i vue-preview -S