Vue ：模块化

模块化

webpack > vue单文件组件 > vue脚手架 

npm源下载太慢，更换淘宝的npm源，npm config set registry https://registry.npm.taobao.org

1、ES6模块化基本语法：

　　1-1、默认导出：导出全部   export default {}

let a = 10
let b = 20
let c = 30

function show(){
    console.log('123456')
}

export default{
    a,c,show 
}

　　默认导入：import m1 from './m1'

import m1 from './m1'
console.log(m1)

 　　1-2、按需导出  ： 按照需求导入一部分

//按需导出
export let a = 'aaa'
export let b = 'bbb'

//按需导入，可以通过 a as 别名
import {a,b} from './m1'

 　　1-3、直接导入并执行模块化代码: 导入后，会执行里边的代码

import ‘m1.js’

 2、webpack ： 官方文档 https://www.webpackjs.com/concepts/

 　　新建包管理配置文件，在终端输入命令

npm init -y

　　安装jQuery

npm i jquery -S

 　　-1 安装webpack相关的包

npm install webpack  webpack-cli -D

　　-2在项目主目录创建 webpack.config.js文件，添加内容

module.exports ={
    //编译模式
    mode: 'development' // development编译模式  production生产模式
}

　　-3、在webpack.json的scripts添加内容

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dec":"webpack"
  },

　　-4、使用 npm run dev  编译项目

　　2-2、入口和出口文件

　　2-3、自动打包功能

　　　　-1 安装自动打包工具 npm install webpack-dev-server -D

　　　　-2 修改webpack.json的 "dev": "webpack-dev-server"

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server"
  },

　　　　-3 修改html里边的脚步引用  <script src="../dist/bundle.js"></script> ，重新打包后，访问 http://localhost:8080

　　2-4、生成预览页面，当进入 http://localhost:8080，不是显示文件夹，而是直接进入主页面的HTML

 

 　　2-5、loader 加载器

webpack只能处理JavaScript文件，loader 让 webpack 能够去处理那些非 JavaScript 文件。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

　　2-5-1、安装 style-loader 和 css-loader

npm i style-loader css-loader -D

　　2-5-2、配置

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

　　test表示文件匹配的类型，use表示要调用的loader。

　　处理文件要调用loader的顺序是固定的，从后往前调用

　　处理less文件：

　　　　安装

npm i less-loader less -D

　　　　添加规则

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

　　处理sass文件：

npm i sass-loader node-sass -D

　　2-6、打包css样式表中的图片和字体文件的 loader

　　下载loader

npm i url-loader file-loader -D

　　配置规则

{test: /.(jpg|png|gif|bmp|jpeg|bmp|ttf|svg)$/,use: 'url-loader?limit=50480'}

 　　2-6、打包处理js高级语法的 loader

 

 3、vue单文件组件

<template>
  
</template>

<script>
export default {
    data:{

    },
    methods:{
        
    }
}
</script>

<style>

</style>

　　加载器-1 下载loader

npm i vue-loader vue-template-compiler -D

　　-2添加loader配置规则

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

　　-3、添加插件

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

    plugins:[
        new VueLoaderPlugin()
    ],

　　 代码的使用

 

 　　打包发布

 4、脚手架 vue-cli

 　　安装--------官方文档安装步骤：https://cli.vuejs.org/zh/guide/installation.html

 　　　　vue li 运行后，创建项目，勾选途中那几项：babel   router  linter   使用配置文件

　　　　下一步选择标准的配置文件

　　　　安装element-ui插件 ------使用图形化安装 element-ui ，并设置按需引入

　　　　　　　插件 > 添加插件 >搜索 vue-cli-plugin-element > 修改导入方式 按需导入import on demand 

 

。