自学Vue nine day！！！-一一网

一、不写子传父有什么问题

<div id='app'>
        <!-- 父组件的num -->
        <p>{{num}}</p>
        <comp :num='num'></comp>
    </div>
    <template id="tmp">
        <div>
            <h1>{{num}}</h1>
            <button @click='add'>按钮</button>
        </div>
    </template>
    <script>
        let comp = {
            template: '#tmp',
            props: ['num'],
            methods: {
                add() {
                    this.num += 10
                }
            },
        }
        new Vue({
            el: '#app',
            data: {
                num: 10
            },
            components: {
                comp
            }
        })
    </script>
复制代码

点击按钮，他加的只是子组件的num，并不会改变父组件的num。

现在看不出什么影响，在举个栗子：

<div id='app'>
        <!-- 父组件的num -->
        <p>父组件的num：{{num[1]}}</p>
        <comp :num='num'></comp>
    </div>
    <template id="tmp">
        <div>
            <h1>子组件的num：{{num[1]}}</h1>
            <button @click='add'>按钮</button>
        </div>
    </template>
    <script>
        let comp = {
            template: '#tmp',
            props: ['num'],
            methods: {
                add() {
                    console.log(this.num);
                    this.num[1] += 10
                }
            },
        }
        new Vue({
            el: '#app',
            data: {
                num: [10, 20, 30]
            },
            components: {
                comp
            }
        })
    </script>
复制代码

当数据是一个数组的形式的时候，再去做修改，页面将不做处理，但数据仍然会改变

注意：正常情况下，不要单单在子元素进行数据更改，容易使数据不统一，后期代码维护困难。所以在每次在子组件做父组件数据相关的更改时，务必要先在父组件定义需要修改的代码，然后以自定义事件的形式传入子组件进行数据的修改，让整个文件的数据进行统一。

二、Webpack

从本质上来说，webpack是一个静态模块打包工具。

要想让我们写好的模块化代码在各式各样的浏览器上能做到兼容，就必须借助于其他工具；而webpack的其中一个核心就是让我们可以进行模块化开发，并帮我们处理模块间的依赖关系。不仅仅是Javascript文件，我们的css、图片、json文件等在webpack中都可以当作模块来使用，这就是webpack的模块化概念。

2.1、 gulp和webpack

Gulp侧重于前端开发的 整个过程 的控制管理（像是流水线），我们可以通过给gulp配置不同的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify'); //压缩代码

// 压缩js
gulp.task('uglify',function(){
    var combined = combiner.obj([
        gulp.src('src/scripts/**/*.js'), //需要压缩的js文件路径
        sourcemaps.init(),
        uglify(), //压缩js
        sourcemaps.write('./'),
        gulp.dest('dest/scripts') //生成的js文件的目录
    ]);
});

//默认任务
gulp.task('default',['uglify']);
复制代码

Webpack有人也称之为 模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

2.2、 webpack初体验

1. 生成项目依赖文件

// 执行后生成package.json文件
 npm init -y 
复制代码

2. 安装依赖

// 最后的参数-D是安装到package.json的开发依赖devDependencies(开发环境)对象里，也可以用 --save-dev代替
npm install webpack@4.44.1 webpack-cli@3.3.12 -D

// 全局安装webpack和webpack-cli
npm i webpack@4.44.1 webpack-cli@3.3.12 -g

// -S是--save的简写，这样安装的话，会安装到dependencies(生产环境)对象里，也可以用 --save代替
npm install jquery -S
复制代码

// package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

复制代码

devDependencies与dependencies的区别：

在发布npm包的时候，本身dependencies下的模块会作为依赖，一起被下载；devDependencies下面的模块就不会自动下载了；但对于项目而言，npm install 会自动下载devDependencies和dependencies下面的模块。

3、创建入口文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script src="./index.js"></script>
</html>
复制代码

index.js

import $ from 'jquery'
$('ul li:even').css({background: 'red'})
$('ul li:odd').css({background: 'green'})
复制代码

在浏览器打开

4. 通过webpack打包

// 执行命令  output输出
webpack index.js -o dist/bundle.js
复制代码

出现这个报错，这是因为命令行执行时候会找全局的webpack，但是我们并没有安装全局的webpack，所以我们可以安装全局webpack，或者是使用脚本方式启动

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack index.js -o dist/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  }
}

复制代码

执行package.json文件中添加的start命令

// 生成 dist文件夹和bundle.js文件
npm run start
复制代码

然后再把index.html原来引入index.js的地方改成是通过webpack生成的bundle.js

<!--index.html文件-->
<!--<script src="https://juejin.cn/post/index.js"></script>-->
<script src="./dist/bundle.js"></script>
复制代码

优化

webpack index.js -o dist/bundle.js 这一句其实是可以写在一个配置文件里

webpack.config.js：

const path = require('path');

module.exports = {
  entry: path.join(__dirname, './index.js'),	// dirname代表索引到文件所在目录
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  }
}
复制代码

package.json：

"scripts": {
    "start": "webpack --config webpack.config.js"
  }
复制代码

5.webpack-dev-server

这时候如果修改index.html的背景颜色red改成是gray，会发现浏览器刷新也没有效果，需要再跑一次npm run start命令才有用，这时候就需要webpack-dev-server(热重载)

安装：

npm install webpack-dev-server -D
复制代码

package.json：

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open --port 3002 --hot"
  }
// --open 自动打开浏览器
// --port 服务监听的端口 3002
// --hot  自动更新

复制代码

这里注意：

1、启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。想看到bundle.js文件，可以运行localhost:3002/bundle.js查看

2、既然bundle.js已经不在dist目录下，因此，如果没有其他的webpack配置项，上面的命令也可以简写为：
"scripts": {
"start": "webpack-dev-server --open --port 3002 --hot"
}
复制代码

index.html

<script src="./bundle.js"></script>
复制代码

6. html-webpack-plugin

安装：npm install -D html-webpack-plugin@4.5.0

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, './index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
      filename: 'index.html'
    })
  ]
}
复制代码

删掉index.html文件里面的bundle.js引用，因为html-webpack-plugin会自动把打包出来的bundle自动加到我们的index.html代码里

7. css-loader

创建一个index.css

index.css

body {
    background: skyblue;
}
复制代码

index.js

import $ from 'jquery'
$('ul li:even').css({background: 'gray'})
$('ul li:odd').css({background: 'green'})

import './index.css'
复制代码

为什么报错，因为webpack默认是不识别.css文件的，需要我们通过 loader 将 .css 文件进行解释成正确的模块。

安装css-loader和style-loader

npm install css-loader style-loader -D 
//index.css -> bundle.js -> style-loader -> <style> index.html
// css-loader的作用是将index.css文件解析为webpack能识别的模块，然后打包进bundle.js里面，但是这样样式并未成功显示在浏览器中。
// style-loader的作用就是将打包到bundle.js中的样式绑定到浏览器上，以style标签的形式显示出来
复制代码

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, './index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']	// 注意：这里的数组是反向读取的（即从右往左）
    }]
  }
}
复制代码

补充：引入的文件是less

安装：npm install less-loader less -D

规则：

{

test: /.less$/,

use: [‘style-loader’, ‘css-loader’, ‘less-loader’]

}

8. ES6 转 ES5

安装

npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
复制代码

const fn = () => {
  console.log(123)
}
复制代码

配置loader

{test:/\.js/,use:['babel-loader'],exclude:/node_modules/} 
复制代码

exclude表示排除掉 node_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src

源文件进行编译即可。

新增.babelrc文件

{ 
    "presets":["env","stage-0"], 
    "plugins":["transform-runtime"] 
} 
复制代码

新增并在index.js中引入main.js，然后使用es6语法

const fn = () => {
  console.log(123)
}

fn()
复制代码

执行命令编译

npm run start 
复制代码

编译后的结果

var fn = function fn() {\n    console.log(123);\n}
复制代码

至此关于webpack的基本配置已经到这里。

解释

babel-present-env 仅仅包括 babel-present-2015 、2016、2017，不包括： babel-stage-x ，也不包括 babel-polyfill

babel-present-env 仅仅转换新版的语法如：箭头函数，并不转换新版api 如：Array.include转换新版

api及抹平浏览器之间的差异（兼容ie）需要 babel-polyfill

babel-polyfill 会污染全局，比较暴力。而 babel-plugin-transfrom-runtime 是哪里需要就给

哪里转换。

babel-plugin-transform-runtime 主要做了一下三件事：

当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator （使用 regenerator

运行时而不会污染当前环境）。

自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件（实现polyfill的功能且无全局污染，

但是实例方法无法正常使用，如 “foobar”.includes(“foo”) ）。

移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替（提取babel转换语法的代

码）。

9. html热更新

在安装过html-webpack-plugin之后，安装：

npm install --save-dev raw-loader
复制代码

在webpack.config.js中配置raw-loader:

module.exports = {
  ......
  module: {
    rules: [
      {
         test: /\.(htm|html)$/,
         use: [
           'raw-loader'
         ]
      },
      ......
    ]
  }
}
复制代码

在 index.js 中引入html：

import './index.html'
复制代码

三、Vue CLI使用准备

Node版本

Vue CLI 需要Node.js 8.9 或者更高版本（推荐使用 12.11.0）。你可以使用nvm 或 nvm-window来管理电脑上面的Node版本。

安装Vue CLI脚手架的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (4.x)：

vue --version
复制代码

如果安装比较慢，可以把下载源切换成淘宝的源：

npm 对应的淘宝下载源设置：

//切换taobao镜像源
npm config set registry https://registry.npm.taobao.org/
// 查看下载源
npm config get registry
复制代码

yarn 对应的淘宝下载源设置：

//切换taobao镜像源
yarn config set registry https://registry.npm.taobao.org/

// 查看下载源
yarn config get registry
复制代码

四、创建项目

初始化项目

vue create

运行以下命令来创建一个新项目：

vue create hello-world
复制代码

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选
择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

对于每一项的功能，此处做个简单描述：

TypeScript 支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA支持
Router 路由
Vuex 状态管理
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

项目结构

项目目录

node_modules
public // 静态资源文件
    |-favicon.ico
    |-index.html
src // 项目源代码，书写代码的地方
    |-assets
    |-App.vue
    |-main.js
.browserslistrc    // 浏览器相关支持情况
.eslintrc.js       // 代码相关支持情况
.gitignore         // Git忽略文件
babel.config.js    // babel配置ES语法 转换
package-lock.json  // npm安装依赖库的具体信息
package.json       // npm依赖库版本信息
postcss.config.js  // css相关转换
README.md          // 项目说明
vue.config.js      // Vue及webpack配置项
复制代码

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...(例如：)
  lintOnSave: false	// 关闭eslint
}
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

seo网站排名上第一的成功概率不如做梦-颠覆式

MindSpore技术专栏 | AI框架中图层IR的分析

小程序海报生成工具–Painter(原生及taro)

Redux 技术分享

Drupal taxonomy模块跨站脚本攻击(XSS)漏洞

Commodore Amiga UNIX finger读取任意文件漏洞

自学Vue nine day！！！

一、不写子传父有什么问题

二、Webpack

2.1、 gulp和webpack

2.2、 webpack初体验

1. 生成项目依赖文件

2. 安装依赖

3、创建入口文件

4. 通过webpack打包

5.webpack-dev-server

6. html-webpack-plugin

7. css-loader

8. ES6 转 ES5

9. html热更新

三、Vue CLI使用准备

Node版本

四、创建项目

初始化项目

项目结构

vue.config.js

seo网站排名上第一的成功概率不如做梦-颠覆式

MindSpore技术专栏 | AI框架中图层IR的分析

小程序海报生成工具–Painter(原生及taro)

Redux 技术分享

Drupal taxonomy模块 跨站脚本攻击(XSS)漏洞

Commodore Amiga UNIX finger读取任意文件漏洞

自学Vue nine day！！！

一、不写子传父有什么问题

二、Webpack

2.1、 gulp和webpack

2.2、 webpack初体验

1. 生成项目依赖文件

2. 安装依赖

3、创建入口文件

4. 通过webpack打包

5.webpack-dev-server

6. html-webpack-plugin

7. css-loader

8. ES6 转 ES5

9. html热更新

三、Vue CLI使用准备

Node版本

四、创建项目

初始化项目

项目结构

vue.config.js

Drupal taxonomy模块跨站脚本攻击(XSS)漏洞