若重要，总会想办法（Vue学习笔记two)

时间  2021-01-29
标签 css html 前端 vue java node python webpack c++ es6 栏目 CSS 繁體版
原文   原文链接

志向太远，不可怕；没有到达，不可怕；可怕的是没有志向，失去了奋斗的方向。
你好，我是梦阳辰！期待与你相遇！css


01.插槽slot

为何要使用插槽？
slot翻译为插槽:
在生活中不少地方都有插槽，电脑的USB插槽，插板当中的电源插槽。html

插槽的目的是让咱们原来的设备具有更多的扩展性。前端

好比电脑的USB咱们能够插入U盘、硬盘、手机、音响、键盘、鼠标等等vue

组件的插槽
组件的插槽也是为了让咱们封装的组件更加具备扩展性。让使用者能够决定组件内部的一些内容到底展现什么。java

例子∶移动网站中的导航栏。
移动开发中，几乎每一个页面都有导航栏。
导航栏咱们必然会封装成一个插件，好比nav-bar组件。一旦有了这个组件，咱们就能够在多个页面中复用了。可是，每一个页面的导航是同样的吗?node

不同！
即不一样的组件要求展现的东西不同，插槽就能够解决这个问题。python

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><cpn></cpn><div id="app">
    <my-cpn><button>我是被插入的东西1</button></my-cpn>
    <my-cpn><button>我是被插入的东西2</button></my-cpn>
    <my-cpn></my-cpn></div><template id="cpn">
    <div>
        <h3>{{title}}</h3>
        <p>我是内容1</p>
        <slot><h3>我是默认值</h3></slot><!--插槽，这里面也可写一些默认值-->
    </div></template><script>
    /*es6可使用`来代替"和'
    * */

    //2.注册组件
    Vue.component('my-cpn',{
        template:`#cpn`,
        data(){
            return{
                title:'有点东西！'
            }
        }
    })
    const app = new Vue({
        el:"#app",
        data:{
            message:"梦阳辰你好！",
        }
    })</script></body></html>

结果：
在这里插入图片描述
具名插槽（有名字）webpack

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><cpn></cpn><div id="app">
    <my-cpn><span slot="center">搜索框</span></my-cpn></div><template id="cpn">
    <div>
        <slot><h3>左边</h3></slot><!--插槽，这里面也可写一些默认值-->
        <slot name="center"><h3>中间</h3></slot><!--插槽，这里面也可写一些默认值-->
        <slot><h3>右边</h3></slot><!--插槽，这里面也可写一些默认值-->

    </div></template><script>
    /*es6可使用`来代替"和'
    * */

    //2.注册组件
    Vue.component('my-cpn',{
        template:`#cpn`,
        data(){
            return{
                title:'有点东西！'
            }
        }
    })
    const app = new Vue({
        el:"#app",
        data:{
            message:"梦阳辰你好！",
        }
    })</script></body></html>

编译做用域

vue根据变量在哪一个模板，做用域就在哪一个实例中。
准则∶父组件模板的全部东西都会在父级做用域内编译;子组件模板的全部东西都会在子级做用域内编译。c++

做用域插槽
父组件替换插槽的标签，可是内容由子组件来提供。es6

父组件想要拿到子组件中的数据：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><div id="app">
    <mycpn></mycpn>

    <mycpn>
        <template v-slot="slot">
            <span>{{slot.data.join(' |')}}</span>

        </template>
    </mycpn></div><template id="cpn">
    <div>
        <slot :data="languages">
            <ul>
                <li v-for="item in languages">{{item}}</li>
            </ul>
        </slot><!--插槽，这里面也可写一些默认值-->
    </div></template><script>
    /*es6可使用`来代替"和'
    * */

    const app = new Vue({
        el:"#app",
        data:{
            message:"梦阳辰你好！",
        },
        components:{
            mycpn:{
                template:`#cpn`,
                data(){
                    return{
                        languages:['java','c','c++','python','javaScript']
                    }
                }
            }
        }
    })</script></body></html>

02.模块化开发（重点）

为何要模块发开发？
若是没有模块开发，团队合做时，不一样的人定义了同一个全局变量名，致使冲突。

而且当js文件过多时，弄清楚他们的顺序就是一件比较头疼的事情。

之前可使用命名闭包的方式解决命名冲突问题。可是不少代码没法进行复用。

有什么方法解决复用问题吗？

之前：在es5时，能够在闭包内新建一个对象，保存你要复用的东西，而后用return返回改对象进行复用。

var modrleB =(function ({//定义一个对象var obj={}var name =‘小红’var flag = falseconsole.log(name);//在对象中添加要复用的东西obj.flag = flagreturn obj;})()

上面是咱们自定义的模块化。

可是：
幸运的是，前端模块化开发已经有了不少既有的规范，以及对应的实现方案。
常见的模块化规范：

CommonJS,AMD,CMD,ES6的Moduels

没错，在es6，自带模块化。

CommonJS

CommonJS的导出

module.exports m {flag: true,test(a, b){return a + b)，demo(a, b)(return a  b)

CommonJS的导入

// ConmonS模块let {test， demo， flag }= require( " modulcA ');//等同于let _mA- require( ' modu1cA");let test =_mA.test;let demo = _mA.demo;let f1ag =_mA.flag;

node.js底层实现了这些功能

ES6模块化的导入与导出

引入时声明模块化，模块之间就不能相互使用。

<script src="a.js" type="module"></script>

除非它本身导出一些内容，其余模块才能使用。

a.js

var name="小明"var flag = true;function sum(num1,num2) {
    return num1-num2;}if(flag){
    console.log(sum(3,6));}export{
    flag,sum}

b.js

var name="梦阳辰"var flag = true;function sum(num1,num2) {
    return num1+num2;}if(flag){
    console.log(sum(3,6));}export{
   flag,sum}//导出方式二export var num =1;export function num3(num1,num2) {
    return num1*num2;}

c.js

import {flag,sum,num} from "./b.js";if(flag){
    alert(sum(20,30));}alert(num)

首页：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a.js" type="module"></script>
    <script src="b.js" type="module"></script>
    <script src="c.js" type="module"></script></head><body></body></html>

export指令用于导出变量函数…。

//导出类export class Person{}

export default指令导出，导入时名字能够随意，但不容许存在多个。

var address ="上海市"export default address;导入：import aa from "./a.js";

统一所有导入：

import * as ff from "./a.js";

03.Webpack

从本质上来说，webpack是一个现代的JavaScript应用的静态模块打包工具。
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

也就是：模块和打包。
在这里插入图片描述
webpack能够前端模块化方案的代码：转换成浏览器能够识别的代码。

前端模块化：

在ES6以前，咱们要想进行模块化开发，就必须借助于其余的工具，让咱们能够进行模块化开发。

而且在经过模块化开发完成了项目后，还须要处理模块间的各类依赖，而且将其进行整合打包。

然而webpack其中一个核心就是让咱们可能进行模块化开发，而且会帮助咱们处理模块间的依赖关系。

并且不只仅是JavaScript文件，咱们的CSS、图片、json文件等等在webpack中均可以被当作模块来使用(在后续咱们会看到)。

这就是webpack中模块化的概念。
打包：
打包如何理解呢?
理解了webpack能够帮助咱们进行模块化，而且处理模块间的各类复杂关系后,打包的概念就很是好理解了。

就是将webpack中的各类资源模块进行打包合并成一个或多个包(Bundle)。

而且在打包的过程当中，还能够对资源进行处理，好比压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操做。

还有一种打包方式gulp/grunt他没有模块化，适合没有用到模块化的工程。

webpack安装

在安装 Webpack 前，你本地环境须要支持 node.js
在这里插入图片描述
node.js自带了软件包管理工具npm。
因为 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm

npm install -g cnpm --registry = https：//registry.npm.taobao.org

使用 cnpm 安装 webpack：

cnpm install webpack@3.6.0 -g

npm 和 cnpm 的区别

（1） 二者之间只是 node 中包管理器的不一样

（2） npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

（3）若是由于网络缘由没法使用npm下载，那cnpm这个就派上用场了。

全局安装与非全局安装：

-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，而且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装能够经过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，经过require()调用；

你可使用任何模块化开发：而后交给webpack打包：
例如使用commonJS模块导入导出:

mathUtil.js

function add(num1,num2) {
    return num1+num2;}function multiplied(num1,num2){
    return num1*num2;}module.exports={
    add,multiplied}

index.js

const {add,multiplied} =require('./mathUtils')alert(add(20,50))

web打包：
先cd到项目目录：
在使用命令：

webpack  要打包的入口文件路径     指定目录和文件名称

在这里插入图片描述
webpack会自动处理依赖文件。

方式二：使用配置文件打包

经过cnpm init命令建好package.json文件。
新建webpack.config.js文件：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//动态获取路径，node语法
        filename:'bundle.js'
    },}

cd到项目目录：在输入命令webpack便可打包。

打包成功后，生成bundle.js文件：

/******/ (function(modules) { // webpackBootstrap/******/ 	// The module cache/******/ 	var installedModules = {};/******//******/ 	// The require function/******/ 	function __webpack_require__(moduleId) {/******//******/ 		// Check if module is in cache/******/ 		if(installedModules[moduleId]) {/******/ 			return installedModules[moduleId].exports;/******/ 		}/******/ 		// Create a new module (and put it into the cache)/******/ 		var module = installedModules[moduleId] = {/******/ 			i: moduleId,/******/ 			l: false,/******/ 			exports: {}/******/ 		};/******//******/ 		// Execute the module function/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******//******/ 		// Flag the module as loaded/******/ 		module.l = true;/******//******/ 		// Return the exports of the module/******/ 		return module.exports;/******/ 	}/******//******//******/ 	// expose the modules object (__webpack_modules__)/******/ 	__webpack_require__.m = modules;/******//******/ 	// expose the module cache/******/ 	__webpack_require__.c = installedModules;/******//******/ 	// define getter function for harmony exports/******/ 	__webpack_require__.d = function(exports, name, getter) {/******/ 		if(!__webpack_require__.o(exports, name)) {/******/ 			Object.defineProperty(exports, name, {/******/ 				configurable: false,/******/ 				enumerable: true,/******/ 				get: getter/******/ 			});/******/ 		}/******/ 	};/******//******/ 	// getDefaultExport function for compatibility with non-harmony modules/******/ 	__webpack_require__.n = function(module) {/******/ 		var getter = module && module.__esModule ?/******/ 			function getDefault() { return module['default']; } :/******/ 			function getModuleExports() { return module; };/******/ 		__webpack_require__.d(getter, 'a', getter);/******/ 		return getter;/******/ 	};/******//******/ 	// Object.prototype.hasOwnProperty.call/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };/******//******/ 	// __webpack_public_path__/******/ 	__webpack_require__.p = "";/******//******/ 	// Load entry module and return exports/******/ 	return __webpack_require__(__webpack_require__.s = 0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports, __webpack_require__) {const {add,multiplied} =__webpack_require__(1)alert(add(20,50))/***/ }),/* 1 *//***/ (function(module, exports) {function add(num1,num2) {
    return num1+num2;}function multiplied(num1,num2){
    return num1*num2;}module.exports={
    add,multiplied}/***/ })/******/ ]);

首页引用打包后的js文件：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/bundle.js"></script></head><body></body></html>

方式三：
命令映射：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"}
命令：cnpm run build

项目开发时咱们通常使用项目本地的webpack，而以前咱们安装的时全局的webpack.
当咱们在使用webpack命令时是先找本地的webpack，再去找全局的webpack。
本地如何安装webpack?
只须要在项目目录下输入命令：

cnpm install webpack@3.6.0  --save-dev

开发时依赖，运行时依赖
webpack就是开发时依赖：因此--save-dev
完成后：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }}

而且生成目录：
在这里插入图片描述
package.json中的scripts的脚本在执行时

会按照必定的顺序寻找命令对应的位置。

首先，会寻找本地的node_modules/lbin路径中对应的命令。

若是没有找到，会去全局的环境变量中寻找。

loader

loader是webpack中一个很是核心的概念。

webpack用来作什么呢?
在咱们以前的实例中，咱们主要是用webpack来处理咱们写的js代码，而且webpack会自动处理js之间相关的依赖。

可是，在开发中咱们不只仅有基本的js代码处理，咱们也须要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。

对于webpack自己的能力来讲，对于这些转化是不支持的。
那怎么办呢?给webpack扩展对应的loader就能够啦。
在这里插入图片描述

loader使用过程:
步骤一︰经过npm安装须要使用的loader

步骤二∶在webpack.config.js中的modules关键字下进行配置

大部分loader咱们均可以在webpack的官网中找到，而且学习对应的用法。

安装loader
webpack文档
你可使用 loader 告诉 webpack 加载 CSS 文件首先安装相对应的 loader：

npm install --save-dev css-loader

咱们这里使用这个版本

npm install css-loader@2.0.2 --save-dev

淘宝镜像记得用cnpm
在webpack.config.js的module关键字下进行配置
指示 webpack 对每一个 .css 使用 css-loader：

由于咱们使用的webpack为3.6.0因此须要注意版本

还须要一个loader将模块导出做为样式添加到DOM中 ：

style-loader

npm install style-loader@0.23.1 --save-dev
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }};//从上到下，从右到左读取

配置后：
webpack.config.js

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//动态获取路径，node语法
        filename:'bundle.js'
    },module:{
        rules: [
            {//加载资源
                test:/\.css$/,
                use:[//读取css文件
                    'style-loader',//将js文件读取到html中
                    'css-loader',
                ]
            }
            ]
    }}

注意以下写法：配置两个对象，是没有用的，会报错，由于webpack版本的问题。不能用这种方式，这种方式不适合webpack3的版本，webpack5是能够的！

 rules: [
      { test: /\.css$/, use: 'css-loader' }
       { test: /\.css$/, use: 'style-loader' }
    ]

你被这个搞到凌晨0点半，记住。

若是咱们但愿在项目中使用less、scss.stylus来写样式，webpack是否能够帮助咱们处理呢?

咱们这里以less为例，其余也是同样的。
咱们仍是先建立一个less文件，依然放在css文件夹中.

安装less-loader

npm install --save-dev less-loader@4.1.0 less@3.9.0

webpack-config.js文件配置：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//动态获取路径，node语法
        filename:'bundle.js'
    },module:{
        rules: [
            {//加载资源
                test:/\.css$/,
                use:[//读取css文件
                    'style-loader',//将js文件读取到html中
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
            ]
    }}

处理图片资源

下载文件对应url-loader

npm install --save-dev url-loader@1.1.2

打包后会将图片转换成base64的字符串。
在这里插入图片描述
配置：

{
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            /*当加载的图片，小于limit时，图片会编码为base64*/
                            limit: 18000
                        }
                    }
                ]
            }

当图片小于limit时，会编码为base64,若是大于limit会被file-loader编码打包。因此你须要下载file-loader

npm install --save-dev file-loader@3.0.1

安装好后便可。
可是第二种图片file-loader打包方式不是生成base64，而是在dist目录下生成图片，文件名字时自动生成（防止重复）。所以须要格外注意路径问题。

可是咱们仍是得有所规范：
咱们能够在options中添加上以下选项:
img :文件要打包到的文件夹

name :获取图片原来的名字，放在该位置

hash:8:为了防止图片名称冲突，依然使用

hash，可是咱们只保留8位

ext:使用图片原来的扩展名

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//动态获取路径，node语法
        filename:'bundle.js',
        publicPath:'dist/'/*关于路径会自动往路径前加dist/*/
    },module:{
        rules: [
            {//加载资源
                test:/\.css$/,
                use:[//读取css文件
                    'style-loader',//将js文件读取到html中
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            /*当加载的图片，小于limit时，图片会编码为base64*/
                            limit: 18000,
                            name:'img/[name].[hash:8].[ext]'

                        },
                    }
                ]
            }
            ]
    }}

对es6语法处理成es5

若是但愿将ES6的语法转成ES5，那么就须要使用babel

而在webpack中，咱们直接使用babel对应的loader就能够了。

安装对应版本的babel

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

配置webpack.config.js文件

配置vue

后续项目中,咱们会使用Vuejs进行开发，并且会以特殊的文件来组织vue的组件。因此，下面咱们来学习一下如何在咱们的webpack环境中集成Vuejs

如今，咱们但愿在项目中使用Vuejs，那么必然须要对其有依赖，因此须要先进行安装

注∶由于咱们后续是在实际项目中也会使用vue的，因此并非开发时依赖

npm install vue@2.5.21 --save

由于运行时也须要使用vue,因此并非开发时依赖。因此不须要dev.

那么，接下来就能够按照咱们以前学习的方式来使用Vue了:

1.runtime-only 代码中不能够有任何的template

2.runtime-compiler代码中能够有template

配置runtime-compiler：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//动态获取路径，node语法
        filename:'bundle.js',
        publicPath:'dist/'/*关于路径会自动往路径前加dist/*/
    },module:{
    },
    resolve:{
        alias:{//别名
            'vue$':'vue/dist/vue.esm.js'
        }
    }}

咱们来考虑另一个问题:
若是咱们但愿将data中的数据显示在界面中，就必须是修改index.html口若是咱们后面自定义了组件，也必须修改index.html来使用组件
可是html模板在以后的开发中，我并不但愿手动的来频繁修改，是否能够作到呢?

定义template属性:
在前面的Vue实例中，咱们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例以后能够管理它其中的内容这里.

咱们能够将div元素中的({message}}内容删掉，只保留一个基本的id为div的元素。

可是若是我依然但愿在其中显示{{message}}的内容，应该怎么处理呢?

咱们能够再定义一个template属性，代码以下∶

el: '#app',template:`<div>
<h2>{{message}}</h2>
<button @click="btnclick">按钮</button><h2>{{name}}</h2>
</div>`

它会用template替换<div id="app"></div>。

再思考：
若是template过多，代码混乱,有什么方法把template抽取出来呢？

const App={
	template:`<div>
<h2>{{message}}</h2>
<button @click="btnclick">按钮</button><h2>{{name}}</h2>
</div>`,data(){
	return{
		message:'你好！',
		name:'梦阳辰'
	}
 },methods:{
 btnclick(){
  }
 }}new Vue({
	el:'#app',
	template:'<App/>',
	components:{
	App:App	}})

仍是不够？
对再抽离:
先下载安装vue-loarder和vue-template-compiler

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev

修改配置文件：

 {
                test:/\.vue$/,
                user:['vue-loader']
 }

由于咱们的vue-loader版本大于14,因此还须要安装一个webpack插件才能正常使用！

// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]}

在package.json里面找到"vue-loader": "^15.4.2",并更改成"vue-loader": "^15.0.0",而后输入命令npm install

将组件的东西，放在vue/app.vue目录下：

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click="btnclick">按钮</button><h2>{{name}}</h2>
    </div></template><script>
    export default {
        name:"App",
        data(){
            return{
                message:'你好！',
                name:'梦阳辰'
            }
        },methods:{
            btnclick(){
            }
        }
    }</script><style scoped>
    .title{
        color:green;
    }</style>

index.js文件：

const {add,multiplied} =require('./js/mathUtils')alert(add(20,50))//依赖css文件require('./css/normal.css')//4.依赖less文件require('./css/special.less')document.writeln('<h2>你好！</h2>')//5.使用vue进行开发import Vue from 'vue'// import App from './vue/app.js'import App from './vue/App.vue'new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App:App    }})

Plugin(插件)

plugin是什么?
plugin是插件的意思，一般是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有功能的各类扩展，好比打包优化，文件压缩等等。

loader和plugin区别
loader主要用于转换某些类型的模块，它是一个转换器。plugin是插件，它是对webpack自己的扩展，是一个扩展器。

plugin的使用过程∶
步骤一︰经过npm安装须要使用的plugins(某些webpack已经内置的插件不须要安装)

步骤二:在webpack.config.js中的plugins中配置插件。

下面，咱们就来看看能够经过哪些插件对现有的webpack打包过程进行扩容，让咱们的webpack变得更加好用。

BannerPlugin
咱们先来使用一个最简单的插件，为打包的文件添加版权声明口该插件名字叫BannerPlugin，属于webpack自带的插件。按照下面的方式来修改webpack.config.js的文件:

const path = require( ' path ')const webpack = require( "webpack')module.exports = {plugins:[new webpack.BannerPlugin('最终版权归mengyangchen全部')]}

htmlWebpackPlugin插件

目前，咱们的index.html文件是存放在项目的根目录下的。
咱们知道，在真实发布项目时，发布的是dist文件夹中的内容，可是dist文件夹中若是没有index.html文件，那么打包的js等文件也就没有意义了。

因此，咱们须要将index.html文件打包到dist文件夹中，这个时候就可使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件能够为咱们作这些事情:

自动生成一个index.html文件(能够指定模板来生成)

将打包的js文件，自动经过script标签插入到body中

安装HtmlWebpackPlugin插件

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

使用插件，修改webpack.config.js文件中plugins部分的内容以下∶

plugins: [new webpack.BannerPlugin('最终版权mengyangchne全部"),new htmlwebpackPlugin({template: 'index.html'),

这里的template表示根据什么模板来生成index.html

另外，咱们须要删除以前在output中添加的publicPath属性

不然插入的script标签中的src可能会有问题

js压缩的Plugin(uglifyjs-webpack-plugin)

安装：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件

const path = require( ' path ")const webpack = require( "webpack ')const uglifyJsPlugin = require('uglifyjs-webpack-plugin ')module.exports = f
plugins:[new webpack.BannerPlugin('最终版权归coderwhy全部")new uglifyJsPlugin()

搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，能够实现咱们想要的让浏览器自动刷新显示咱们修改后的结果。

不过它是一个单独的模块，在webpack中使用以前须要先安装它

npm install --save-dev webpack-dev-server@2.9.3

devserver也是做为webpack中的一个选项，选项自己能够设置以下属性∶

contentBase :为哪个文件夹提供本地服务，默认是根文件夹，咱们这里要填写./dist

port :端口号

inline :页面实时刷新

historyApiFallback :在SPA页面中，依赖HTML5的history模式

webpack.config.js文件配置修改以下：

devServer: {contentBase:'./dist',inline: true//是否实时监听}

再配置scripts:

"dev": "webpack-dev-server --open"

webpack配置文件的分离

04.vuecli脚手架

若是你只是简单写几个Vue的Demo程序,那么你不须要Vue CLI.

若是你在开发大型项目，那么你须要,而且必然须要使用Vue CLI

使用Vue.js开发大型应用时，咱们须要考虑代码目录结构、项目结构和部著、热加载、代码串兀测风寺事情。

若是每一个项目都要手动完成这些工做，那无疑效率比较低效，因此一般咱们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?
CLI是Command-Line Interface,翻译为命令行界面,可是俗称脚手架.Vue CLI是一个官方发布vue.js项目脚手架

使用vue-cli能够快速搭建Vue开发环境以及对应的webpack配置.

脚手架长什么样子?

安装Vue CLI

官网

vue.js官方脚手架就使用了webpack模板。
使用前提：node.js

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;

预先定义好的目录结构及基础代码，就比如我们在建立Maven项目时能够选择建立一个骨架项目，这个骨架项目就是脚手架,咱们的开发更加的快速;

安装node
因此须要安装webpack

安装Vue脚手架：
这是最新的vue/cli（4版本）

cnpm install -g @vue/cli

遇到安装问题，用管理员身份执行：

npm clean cache --froce即删除文件
c：\user\用户名\AppData\Roaming\npm-cache

运行如下命令来建立一个新项目（vue-cli3/4)：

vue create 项目名

对于vue/cli2版本建立项目的目录：

vue init webpack 项目名

在这里插入图片描述
在这里插入图片描述
runtimeonly和runtimeComplier的区别：
main.js不一样
在这里插入图片描述
Vue程序执行过程
在这里插入图片描述
总结
若是在以后的开发中，你依然使用template，就须要选择Runtime-Compiler

若是你以后的开发中，使用的是.vue文件夹开发，那么能够选择Runtime-only
在这里插入图片描述
在这里插入图片描述

Vue CLI3/4建立项目

vue-cli 3与2版本有很大区别
vue-cli 3是基于webpack 4打造，vue-cli 2仍是webapck 3

vue-cli 3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录vue-cli 3提供了vue ui命令，提供了可视化配置，更加人性化

移除了static文件夹，新增了public文件夹，而且index.html移动到public中

建立项目：

vue create 项目名

选择preset(设置）
Manually手动

按空格选择和取消。

Vue CLI3/4配置去哪里了？

vue ui
启动本地服务

能够管理项目。
在这里插入图片描述

箭头函数

箭头函数是定义函数的方式。

const aa=function(){}//箭头函数const bb =(参数列表）=>{}const sum = (num1,num2)=>{return num1+num2;}const sum = num=>{return num*num}//函数体内只有一行代码const num = (num1,num2)=>num1+num2

Time past cannot be called back again.

在这里插入图片描述

在这里插入图片描述

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程