一、ES6的模块化
1. ES6模块化规范
每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字
2. 基本语法
发使用 export default { }导出默认成员 使用 import 接收名称 from "模块路径" 导入 使用 export A 按需导出 使用 import { A, B } from "模块路径" 按需导入
Node 对于 ES6 的支持并不好，所以我们需要引入 babel 来示范
3. 详解 package.json
代码语言：javascript复制{
// 模块名称
"name": "Demo",
// 模块版本
"version": "1.0.0",
// 入口文件
"main": "index.js",
// 描述信息
"description": "第一个 Vue 项目",
// 作者
"author": "Demo_Null",
// 如果值为true,npm将拒绝发布它
"private": true,
// 执行命令的脚本
"scripts": {
// 执行npm run dev,其实是执行 node build/dev-server.js
"dev": "node build/dev-server.js",
},
// 模块的版本依赖
"dependencies": {
"vue": "^2.2.1",
"vue-router": "^2.3.0"
},
// 开发环境依赖
"devDependencies": {
"babel-core": "^6.22.1",
"webpack": "^2.2.1"
},
// 项目运行的环境版本范围
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
}使用 npm init -y 可以初始化 package.json 并使用默认配置
二、webpack
1. webpack是什么
Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，可以处理代码压缩混淆、处理 js 兼容性问题、性能优化等。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。
2. webpack的基本使用
等待 webpack 打包完毕之后，找到默认的 dist 路径中生成的 main.js 文件，将其引入到 html 页面中。
3. webpack的相关配置
- 配置 webpack 打包的入口/出口
代码语言：javascript复制默认会将 src/index.js 作为默认的打包入口 js 文件，将 dist/main.js 作为默认的打包输出 js 文件
// node 中操作路径的模块
const path = require("path");
module.exports = {
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"main.js"
}
}三、 webpack中的加载器
1. CSS
代码语言：javascript复制// 安装相关 loader
npm install style-loader css-loader -D
// 配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
// test 设置需要匹配的文件类型，支持正则
test:/.css$/, // 以 css 结尾的文件
// use 表示该文件类型需要调用的loader，优先级从后往前
use:['style-loader','css-loader']
}
]
}
}2. 图片及字体文件
代码语言：javascript复制// 安装
npm install url-loader file-loader -D
// 配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
// | 表示或者
test:/.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片
use:"url-loader?limit=16940"
}
]
}
}3. 高级 JS 语法
代码语言：javascript复制// 安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
// 安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
// 在项目根目录创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
// 配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
test:/.js$/,
use:"babel-loader",
// exclude 为排除项，意思是不要处理node_modules中的js文件
exclude:/node_modules/
}
]
}
}四、Vue单文件组件
1. 什么是 vue 单文件组件
代码语言：javascript复制Vue单文件组件每个单文件组件的后缀名都是.vue 优化了传统全局组件的一些弊端（模板缺乏高亮、没有 css 等） 每一个Vue单文件组件都由template、script、style 三部分组成
<template>
// 组件代码区域
</template>
<script>
// js代码区域
</script>
<style scoped>
// 样式代码区域
</style>2. 配置 vue 单文件组件加载器
代码语言：javascript复制// 安装 vue 组件的加载器
npm install vue-loader vue-template-compiler -D
// 配置规则：更改 webpack.config.js 的 module 中的 rules 数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ vuePlugin ],
module : {
rules:[
{
test:/.vue$/,
loader:"vue-loader",
}
}
}3. webpack 中使用 Vue
代码语言：javascript复制/*
一般是 src/main.js
*/
// 安装Vue
npm install vue -S
// 在index.js中引入vue
import Vue from "vue"
// 创建 Vue 实例对象并指定 el，最后使用 render 函数渲染单文件组件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})
/*
打包发布
*/
// 配置 package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}五、 Vue 脚手架
1. 安装 Vue 脚手架
代码语言：javascript复制npm install -g @vue/cli2. cmd 中使用脚手架创建 Vue 项目
- 命令 vue create 项目名称
- 选择预设
- 选择特性（使用空格选中）
- 是否启用历史模式的路由
- ESline 选择
- 何时进行 ESline 语法校验
- 配置文件如何放
- 是否将当前设置存为模板
- 创建成功
- 启动项目（npm run serve）
3. 使用可视化界面创建 Vue 项目
- 命令 vue ui
- 新建项目
4. Vue 脚手架自定义配置
代码语言：javascript复制// 通过 package.json 进行配置 [不推荐使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
// 通过单独的配置文件进行配置，创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
