Vue工程化
1,模块化相关规范
1. 浏览器端模块化规范
1.1 AMD
Require.js (http://www.requirejs.cn/)
1.2 CMD
Sea.js (https://seajs.github.io/seajs/docs/)
2. 服务器端模块化规范
2.1 CommonJS
- 分为 单文件模块、包
- 导出:
module.exports
和exports
- 导入:
require('标识符')
3. ES6
模块化
- 每个 js 文件都是一个独立的模块
- 导入使用
import
关键字 - 暴露使用
export
关键字 - 每个模块中,只允许使用唯一的一次
export default
,可以多次使用export
ES6
中的导入、暴露等高级语法,浏览器不能识别,需要讲ES6
语法转为浏览器能够识别的ES5
语法,可以通过babel,webpack等
4. babel
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
项目跟目录创建文件
babel.config
在
babel.config
中添加下面代码1
2
3
4
5
6
7
8
9
10
11const presets = [
["@babel/env", {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
}
}]
];
module.exports = { presets };
- 通过
npx babel-node index.js
执行代码
2,webpack
1. 安装配置
运行
npm install webpack webpack-cli –D
命令,安装webpack
相关的包项目根目录中,创建名为
webpack.config.js
在
webpack.config.js
中添加代码:1
2
3module.exports = {
mode: 'development' // mode 用来指定构建模式
}在
package.json
配置文件中的scripts
节点下,新增dev
脚本:1
2
3"scripts": {
"dev": "webpack" // script 节点下的脚本,可以通过 npm run 执行
}
- 运行
npm run dev
命令,启动webpack
进行项目打包。
2. 基本使用
2.1 配置打包
入口文件
src -> index.js
输出文件
dist -> main.js
修改,以在
webpack.config.js
中新增配置信息:1
2
3
4
5
6
7
8const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称
}
}
2.2 自动打包
运行
npm install webpack-dev-server –D
命令,安装支持项目自动打包的工具修改
package.json -> scripts
中的dev
命令:1
2
3"scripts": {
"dev": "webpack-dev-server" // script 节点下的脚本,可以通过 npm run 执行
}
将
src -> index.html
中,script
脚本的引用路径,修改为"/buldle.js“
运行
npm run dev
命令,重新进行打包在浏览器中访问
http://localhost:8080
地址,查看自动打包效果webpack-dev-server
会启动一个实时打包的http
服务器webpack-dev-server
打包生成的输出文件,默认放到了项目根目录中,而且是虚拟的、看不见的相关参数,设置端口
1
2
3
4
5
6
7// package.json中的配置
// --open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// --port 配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},
2.2 预览页面
运行 npm install html-webpack-plugin –D 命令,安装生成预览页面的插件
修改 webpack.config.js 文件头部区域,添加配置信息:
1
2
3
4
5
6// 导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
template: './src/index.html', // 指定要用到的模板文件
filename: 'index.html' // 指定生成的文件的名称,该文件存在于内存中,在目录中不显示
})
修改 webpack.config.js 文件中向外暴露的配置对象,新增配置节点:
1
2
3module.exports = {
plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}
3. 加载器
1. css 文件
运行
npm i style-loader css-loader -D
命令,安装处理css
文件的 `loader在
webpack.config.js 的 module -> rules
数组中,添加loader
规则:1
2
3
4
5
6// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
test
表示匹配的文件类型,use
表示对应要调用的loader
use
数组中指定的loader
顺序是固定的多个
loader
的调用顺序是:从后往前调用
2. less文件
运行
npm i less-loader less -D
在
webpack.config.js 的 module -> rules
数组中,添加loader
规则:1
2
3
4
5
6// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
3. scss文件
运行 npm i sass-loader node-sass -D 命令
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则
1
2
3
4
5
6// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
4. 配置 postCSS 自动添加 css 的兼容前缀
运行
npm i postcss-loader autoprefixer -D
命令在项目根目录中创建
postcss
的配置文件postcss.config.js
,并初始化如下配置:1
2
3
4const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins: [ autoprefixer ] // 挂载插件
}
在
webpack.config.js
的module -> rules
数组中,修改css
的loader
规则:1
2
3
4
5module: {
rules: [
{ test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
]
}
5. 打包样式表中的图片和字体文件
运行
npm i url-loader file-loader -D
命令在
webpack.config.js
的module -> rules
数组中,添加loader
规则如下:1
2
3
4
5
6
7
8module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}其中
?
之后的是loader
的参数项。limit
用来指定图片的大小,单位是字节(byte)
,只有小于limit
大小的图片,才会被转为base64
图片
5. 打包处理 js 文件中的高级语法(类等)
安装
babel
转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D
安装
babel
语法插件相关的包:npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
在项目根目录中,创建
babel
配置文件babel.config.js
并初始化基本配置:1
2
3
4module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties’ ]
}在
webpack.config.js
的module -> rules
数组中,添加loader
规则:1
2// exclude 为排除项,表示 babel-loader 不需要处理 node_modules 中的 js 文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
3,Vue
单文件组件
1 . 基本使用
1 | <template> |
2. ebpack
中配置 vue
组件的加载器
运行
npm i vue-loader vue-template-compiler -D
命令在
webpack.config.js
配置文件中,添加vue-loader
配置项:1
2
3
4
5
6
7
8
9
10
11
12
13const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
plugins: [
// ... 其它插件
new VueLoaderPlugin() // 请确保引入这个插件!
]
}
3. 在 webpack
项目中使用 vue
运行
npm i vue –S
安装vue
在
src -> index.js
入口文件中,通过import Vue from 'vue'
来导入vue
构造函数创建
vue
的实例对象,并指定要控制的el
区域通过
render
函数渲染App
根组件1
2
3
4
5
6
7
8
9
10// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
// 3. 指定 vm 实例要控制的页面区域
el: '#app',
// 4. 通过 render 函数,把指定的组件渲染到 el 区域中
render: h => h(App)
})
4. webpack 打包发布
通过 package.json
文件配置打包命令
1 | // 在package.json文件中配置 webpack 打包命令 |
4,Vue 脚手架
1. 安装、基本用法、项目结构
安装3.x版本的Vue脚手架
1
npm install -g @vue/cli
使用
- 交互式命令行
vue create my-project
- 图形化界面
vue ui
- 交互式命令行
项目结构
public
静态资源目录src
组件源码目录babel.config.js
Babel配置文件
2. 自定义配置
单独的配置文件
vue.config.js
,能够覆盖默认配置,结果必须是Json格式1
2
3
4
5
6// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}
5,Element-UI 的基本使用
官网地址为: http://element-cn.eleme.io/#/zh-CN
1. 安装
终端安装依赖包
npm i element-ui –S
图形化界面安装
vue ui -> Vue项目管理器 -> 插件 -> 添加插件 -> 搜索’vue-cli-plugin-element’安装
导入
Element-UI
相关资源1
2
3
4
5
6// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);
原文作者: 冯亚杰(DanBoard·Feng)
原文链接: http://danbo3110.github.io/2019/12/07/Vue工程化环境(模块化规范、webpack、单文件组件、脚手架、Element-UI)/
版权声明: 转载请注明出处(必须保留作者署名及链接)