每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字
发使用 export default { }导出默认成员 使用 import 接收名称 from "模块路径" 导入 使用 export A 按需导出 使用 import { A, B } from "模块路径" 按需导入
Node 对于 ES6 的支持并不好,所以我们需要引入 babel 来示范
{
// 模块名称
"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 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,可以处理代码压缩混淆、处理 js 兼容性问题、性能优化等。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。
等待 webpack 打包完毕之后,找到默认的 dist 路径中生成的 main.js 文件,将其引入到 html 页面中。
默认会将 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"
}
}
// 安装相关 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']
}
]
}
}
// 安装
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"
}
]
}
}
// 安装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单文件组件每个单文件组件的后缀名都是.vue 优化了传统全局组件的一些弊端(模板缺乏高亮、没有 css 等) 每一个Vue单文件组件都由template、script、style 三部分组成
<template>
// 组件代码区域
</template>
<script>
// js代码区域
</script>
<style scoped>
// 样式代码区域
</style>
// 安装 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",
}
}
}
/*
一般是 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"
}
npm install -g @vue/cli
// 通过 package.json 进行配置 [不推荐使用]
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
// 通过单独的配置文件进行配置,创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}