zoukankan      html  css  js  c++  java
  • Vue :模块化

    模块化

    webpack > vue单文件组件 > vue脚手架 

    npm源下载太慢,更换淘宝的npm源,npm config set registry https://registry.npm.taobao.org

    1、ES6模块化基本语法:

      1-1、默认导出:导出全部   export default {}

    let a = 10
    let b = 20
    let c = 30
    
    function show(){
        console.log('123456')
    }
    
    export default{
        a,c,show 
    }

      默认导入:import m1 from './m1'

    import m1 from './m1'
    console.log(m1)

       1-2、按需导出  : 按照需求导入一部分

    //按需导出
    export let a = 'aaa'
    export let b = 'bbb'
    //按需导入,可以通过 a as 别名
    import {a,b} from './m1'

       1-3、直接导入并执行模块化代码: 导入后,会执行里边的代码

    import ‘m1.js’

     2、webpack : 官方文档 https://www.webpackjs.com/concepts/

       新建包管理配置文件,在终端输入命令

    npm init -y

      安装jQuery

    npm i jquery -S

       -1 安装webpack相关的包

    npm install webpack  webpack-cli -D

      -2在项目主目录创建 webpack.config.js文件,添加内容

    module.exports ={
        //编译模式
        mode: 'development' // development编译模式  production生产模式
    }

      -3、在webpack.json的scripts添加内容

      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dec":"webpack"
      },

      -4、使用 npm run dev  编译项目

      2-2、入口和出口文件

      2-3、自动打包功能

        -1 安装自动打包工具 npm install webpack-dev-server -D

        -2 修改webpack.json的 "dev": "webpack-dev-server"

      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "webpack-dev-server"
      },

        -3 修改html里边的脚步引用  <script src="../dist/bundle.js"></script> ,重新打包后,访问 http://localhost:8080

      2-4、生成预览页面,当进入 http://localhost:8080,不是显示文件夹,而是直接进入主页面的HTML

     

       2-5、loader 加载器

    webpack只能处理JavaScript文件,loader 让 webpack 能够去处理那些非 JavaScript 文件。本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。

      2-5-1、安装 style-loader 和 css-loader

    npm i style-loader css-loader -D

      2-5-2、配置

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

      test表示文件匹配的类型,use表示要调用的loader。

      处理文件要调用loader的顺序是固定的,从后往前调用

      处理less文件:

        安装

    npm i less-loader less -D

        添加规则

    {test: /.less$/, use:['style-loader','css-loader','less-loader']}

      处理sass文件:

    npm i sass-loader node-sass -D

      2-6、打包css样式表中的图片和字体文件的 loader

      下载loader

    npm i url-loader file-loader -D

      配置规则

    {test: /.(jpg|png|gif|bmp|jpeg|bmp|ttf|svg)$/,use: 'url-loader?limit=50480'}

       2-6、打包处理js高级语法的 loader

     

     3、vue单文件组件

    <template>
      
    </template>
    
    <script>
    export default {
        data:{
    
        },
        methods:{
            
        }
    }
    </script>
    
    <style>
    
    </style>
    App.vue

      加载器-1 下载loader

    npm i vue-loader vue-template-compiler -D

      -2添加loader配置规则

            rules:[
                {test:/.vue$/,loader:'vue-loader'}
            ]

      -3、添加插件

    const VueLoaderPlugin = require('vue-loader/lib/plugin')
        plugins:[
            new VueLoaderPlugin()
        ],

       代码的使用

     

       打包发布

     4、脚手架 vue-cli

       安装--------官方文档安装步骤:https://cli.vuejs.org/zh/guide/installation.html

         vue li 运行后,创建项目,勾选途中那几项:babel   router  linter   使用配置文件

        下一步选择标准的配置文件

        安装element-ui插件 ------使用图形化安装 element-ui ,并设置按需引入

           插件 > 添加插件 >搜索 vue-cli-plugin-element > 修改导入方式 按需导入import on demand 

     

  • 相关阅读:
    sysctl.conf文件详解
    linux下高并发网络应用注意事项
    linux 异常
    myeclipse 上安装 Maven3
    windows 系统相关配置
    常用DOS命令总结
    豆瓣爬虫Scrapy“抄袭”改写
    vue基本配置和生命周期
    面试知识点
    ubuntu18.04国内软件源
  • 原文地址:https://www.cnblogs.com/Lemonades/p/12527353.html
Copyright © 2011-2022 走看看