模块化
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
。