【Vue_05】前端工程化

{
	// 模块名称
	"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"
	},
}

// 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/
            }
        ]
    }
}

<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
    }
}