Vue 模块化[webpack][vue单文件][es6模块化][vue-cli]

一.Vue 模块化

1.es6模块化用法

1.1 默认导出

解释：这样里面的内容就可以供其调用，接受：import char from './1.js'，其中参数char就表示默认导出的所有内容即export default里面的内容

let a = 5
let b = 6
export default{a,b}

1.2 按需导出

解释：跟上面数据互不相通，按需导入：import {c,d},char from './1.js',c和d是按需导出的，char还是上面那个即export default里面的内容

export c=10
export d=20

1.3 直接执行

解释：不想获取里面的成员，只想执行目标代码
格式：import './1.js' #这样就会执行里面的代码了

2.webpack

解释：其是一个流行的前端项目构建工具，能够代码压缩混淆、处理js兼容和性能优化等等

2.1 基础

解释：需要先自行下载安装node.js，值得注意的是自己配置好npm国内镜像，以及下载内容放置位置，下面代码-D表示把插件添加开发环境，而不是生产

1. 初始化：npm init -y

2.2 安装和运行

1. 安装：npm i webpack-cli
2. 创建配置文件名：webpack.config.js
3. 配置

module.exports={
    // 模式   开发(development)或上线(production)
    mode:'development'
}

4. 打包脚本：写入package.json文件的scripts下： "dev":"webpack"
5. 初运行：npm run dev #默认需要把js放置在src下命名为index.js且跟package.json同步
6. 成功：会在创建一个dist目录下面创建一个名为main.js的文件

2.3 配置文件命名与放置

解释：配置webpack.config.js文件

const path = require('path')
module.exports={
    // 模式   开发(development)或上线(production)
    mode:'development',
    // 入口，即将要打包的文件
    entry:path.join(__dirnamem,'./src/1.js'),
    output:{
        path:path.join(__dirnamem,'./dist'),// 出口，即将要放置的目录
        filename:'22.js'// 打包完后的文件名
    }
}

3.webpack-loader

解释：webpack默认只能打包js后缀的文件，故需要专门下载支持css（能自动配置对不同浏览器的支持），img，vue等等，对于高级js语法也需要loader支持，值得注意的是最近2022的webpack支持js部分高级语法，和图片的打包

使用：使用时无需再配置webpack里面入口出口的js文件，只需要用es6在js里面引入

3.1 css

1. 安装：npm i style-loader css-loader -D
2. 配置webpack.config.js

    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader"]}
        ]
    }

3.2 post-css

解释：为css增加不同浏览器的兼容性

1. 安装：npm i postcss-loader autoprefixer -D
2. 创建文件postcss.config.js

const autoprefixer = require('autoprefixer')
module.exports={
    plugins:[autoprefixer]
}

3. 配置webpack.config.js

module:{
   rules:[
      {test:/\.css$/,use:["style-loader","css-loader","postcss-loader"]}
      ]
    }

3.3 vue

1. 安装：npm i vue-loader@15.9.2 vue-template-compiler -D
2. 配置webpack.config.js

	const VueLoaderPlugin = require ('vue-loader/lib/plugin')
    module:{
        rules:[
            {test:/\.css$/,use:["style-loader","css-loader","postcss-loader"]},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    plugins:[new VueLoaderPlugin()]

3.4 打包发布

解释：所有用的的文件会到默认dist目录，需要设置脚本：'dev':'webpack -p'

4.Vue单文件

安装：npm install vue@2.6.14 -D
解释：结构由，template组件模板区域、script逻辑执行区域和style样式区域
注意：把js文件放在文末，不然会找不到
vue文件：

<template>
    <div>
        <h1>hello world {{name}}</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                name:'jack'
            }
        }
    }
</script>
# scoped确保css私有
<style scoped>
h1{
    color: red;
}
</style>

引入到js：

import Vue from 'vue'
import './roc.css'
import App from './app.vue'

const aaa = new Vue({
    el:'#app',
    render:h=>h(App)

})

二.Vue 脚手架

解释：基于 webpack 构建，并带有合理的默认配置；CLI 服务是构建于 webpack 和 webpack-dev-server 之上的；Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器；

1.基础

注意：webpack-dev-server实时打包的内容在内存中是看不到的
安装：npm install -g @vue/cli
创建项目：建议使用可视化vue ui来创建
需要选择（必选）：bable、linter、使用配置文件、ESlint+standard config和lint on save
任务区：serve可以实时打包编译，build可以来发布

2.vue-cli的webpack配置

解释：需要自行创建文件名称为vue.config.js来进行配置
例如配置出口入口：

2.1单页面

 pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 发布后输出dist/index.html 的输出
          filename: 'index.html',
          # 友情提醒，在调试模式下filename的html文件需要与template相同，发布模式可自定义
        }
    }

2.2多页面

pages: {
    index: {
      // page 的入口
      entry: 'src/views/background/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html'
    },
    login:{
      // page 的入口
      entry: 'src/views/login/main.js',
      // 模板来源
      template: 'public/login.html',
      // 在 dist/index.html 的输出
      filename: 'login.html'
      # 友情提醒，在调试模式下filename的html文件需要与template相同，发布模式可自定义
    }
  }

2.3设置静态资源目录

格式：
特别说明：此参数在webpack-server阶段不要使用，不然实时刷新就找不到文件了，打包的时候才能加上

友情提醒：在调试模式下filename的html文件需要与template相同，发布模式可自定义

module.exports = {
  publicPath: '../',
  assetsDir: 'static'}

3.发布

解释：在vue ui命令界面下找到build就可以发布
注意：提前创建vue.config.js配置，否则出现相对路径问题

module.exports = {
    publicPath:'./',
  }

默认：默认情况下发布后会创建一个dist目录，里面包含需要的上线网站的内容