精华内容
下载资源
问答
  • 1.项目准备 安装之前请确保安装了nodejs和npm,在命令行输入node -v查看是否安装node 在vscode终端里面这是npm的镜像仓库,会提高...创建空文件夹"webpackVue",然后用vscode打开,然后打开vscode终端 # 将项目初始化成

    1.项目准备

    安装之前请确保安装了nodejs和npm,在命令行输入node -v查看是否安装node
    在vscode终端里面这是npm的镜像仓库,会提高下面下载的速度

    # 配置仓库地址
    npm config set registry https://registry.npm.taobao.org
    # 验证是否成功命令
    npm config ls
    

    当验证命令结果如下图,则表示成功了
    在这里插入图片描述

    2.初始化项目

    创建空文件夹"webpackVue",然后用vscode打开,然后打开vscode终端

    # 将项目初始化成npm的项目
    # -y 的含义:yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.json
    npm init -y
    

    这时候我们看见根目录下多了一个package.json的文件夹
    在这里插入图片描述

    3.安装依赖

    由于需要安装的依赖太多了,我就直接在package.json的devDependencies和dependencies里面写入需要安装的依赖了,然后直接npm install
    package.json代码如下:

    {
        "name": "webpackVue",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "serve": "webpack-dev-server --config webpack.config.js --port 3000",
            "build": "webpack --progress --config webpack.config.js"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "vue": "^2.6.12",
            "core-js": "^3.4.0"
        },
        "devDependencies": {
            "@babel/core": "^7.7.2",
            "@babel/plugin-transform-runtime": "^7.6.2",
            "@babel/preset-env": "^7.7.1",
            "autoprefixer": "^9.7.1",
            "babel-loader": "^8.0.6",
            "babel-plugin-import": "^1.12.2",
            "css-loader": "^3.2.0",
            "file-loader": "^4.2.0",
            "html-webpack-plugin": "^3.2.0",
            "postcss-loader": "^3.0.0",
            "style-loader": "^1.0.0",
            "terser-webpack-plugin": "^2.2.1",
            "url-loader": "^2.2.0",
            "vue-loader": "^15.7.2",
            "vue-template-compiler": "^2.6.10",
            "webpack": "^4.44.2",
            "webpack-cli": "^3.3.10",
            "webpack-dev-server": "^3.9.0"
        }
    }
    

    然后执行:

    npm install
    

    可能是我之前安装过,如果有报错的话,百度解决报错
    这里简单的说明一下这些依赖有什么用

    1、core-js:用来兼容es6的语法,我安装的是3.x的版本,可以安装指定的版本,在@后面指定版本号就行npm install core-js@3 --save

    2、plugin-transform-runtime:可以减小项目文件的大小,先安装npm install --save-dev babel-plugin-transform-runtime 然后再安装npm install --save babel-runtime

    3、preset-env:按需转码用的,npm install --save-dev babel-preset-env

    4、autoprefixer:根据你需要兼容的浏览器版本来自动增加前缀的工具

    5、babel-loader:转换es6代码,npm i babel-loader -D

    6、babel-plugin-import:会在编译过程中将 import 的写法自动转换为按需引入的方式,npm i babel-plugin-import -D

    7、css-loaderstyle-loader:使用webpack打包时对于css类文件不能直接打包,需要安装对应的loader,npm install css-loader style-loader --save-dev

    8、file-loader:由于webpack只能处理js类型的文件,无法打包其他类型的,不安装相应的loader打包图片就会报错,比如图片,安装这个就可以对图片等类型进行打包,npm install --save-dev file-loader

    9、html-webpack-plugin:打包的dist 目录属于构建目录,是我们源码的输出目录,我们希望里面的一切都是可以自动化的,包括 index.html 文件也能自动创建,js 文件也能自动引入到页面,所以我们需要用到插件 html-webpack-plugin,使用之前应该新建一个html模板,好让插件在执行命令时,知道参照谁来生成对应的 html 文件,npm install html-webpack-plugin --save-dev

    10、terser-webpack-plugin: 打包时自动去除console.log,npm install terser-webpack-plugin --save-dev

    11、urlurl-loader:访问简单的图片,将文件转换为base64URL,配合file-loader使用,npm install url-loader --save-dev

    12、vue-loader:打包vue类型的文件(一定要先安装vue),npm install vue-loader --save-dev

    13、vue-template-compiler:将 Vue 2.0 模板预编译为渲染函数(template => ast => render),以避免运行时编译开销和 CSP。配合vue-loader使用,npm install vue-template-compiler

    14、安装webpack相关:npm install – save-dev webpack webpack-cli webpack-dev-server

    4.新建项目相关文件

    在根目录下新建public文件夹,并在里面新建index.html(首页入口文件)
    新建src文件夹,并新建templates文件夹存放vue文件和app.vue(项目入口文件)
    新建main.js (核心js文件,全局的配置写在这里)
    新建webpack.config.js(配置文件)
    在这里插入图片描述
    index.html代码:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>xxxxxxxx</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
    </html>
    

    main.js代码

    import Vue from 'vue'
    // ./src/app就是./src/app.vue
    import App from './src/app'
    
    // 把app.vue挂在到index.html中id为app的节点下
    new Vue({
        render: h => h(App)
    }).$mount('#app')
    
    

    app.vue里面随便写点东西,一会运行项目的时候展示,相当于运行后的首页

    <template>
      <div id="test">hello zhanghj!</div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      methods: {},
    };
    </script>
    <style scoped>
    #test {
      color: red;
    }
    </style>
    

    webpack.json.js代码:

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    const autoprefixer = require('autoprefixer');
    const TerserPlugin = require('terser-webpack-plugin')
    
    module.exports = {
        //入口文件
        entry: {
            main: './main.js',
        },
        //打包之后输出的文件位置和文件名,,注意__dirname代表当前路径,是两个下划线
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: "[name].[chunkhash:8].bundle.js"
        },
        //环境,development:开发环境
        mode: 'development',
        resolve: {
            //配置目录别名
            alias: {
                vue$: 'vue/dist/vue.esm.js',
                '@assets': path.resolve('./src/assets'),
                '@templates': path.resolve('./src/templates'),
                '@utils': path.resolve('./src/utils'),
                '@components': path.resolve('./src/components'),
            },
            //配置文件扩展名,这样引入的时候后面就不用加.vue、.js等后缀名了
            extensions: ['*', '.js', '.vue', '.json']
        },
        module: {
            // 验证规则:比如.js结尾的文件用‘babel-loader’去进行加载
            // test后面的是正则表达式,/\.js$/指的是以.js结尾的文件
            rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: [autoprefixer(['last 2 version', '> 1%', 'not ie < 11'])]
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            // 当小于3k的时候,会直接将图片转换成base64,减少请求
                            limit: 3 * 1024,
                            // 比如原来图片叫bg.jpg,打包后就会在dist文件夹下面生成bg-aaa.jpg
                            name: '[name]-aaa.[ext]'
                        }
                    }
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                //引用的模板文件路径
                template: './public/index.html',
                filename: 'index.html'
            })
        ],
        optimization: {
            minimizer: [
                new TerserPlugin({
                    //是否缓存
                    cache: true,
                    //是否定位源文件的代码
                    sourceMap: true,
                    terserOptions: {
                        comments: false,
                        //打包的时候不打包用不到的、console.log的、debug调试的、死代码等代码
                        compress: {
                            unused: true,
                            drop_console: true,
                            drop_debugger: true,
                            dead_code: true
                        }
                    },
                    //是否多进程并行压缩代码
                    parallel: true,
                })
            ]
        }
    
    }
    

    5.打包、运行、测试

    在package.json里面已经配置过打包和运行的命令
    在这里插入图片描述
    打包:

    npm run build
    

    打包后会生成之前配置的bundle.js
    在这里插入图片描述
    运行:

    npm run serve
    

    在这里插入图片描述
    测试:
    上面配置的是3000端口,所以浏览器访问localhost:3000,就能看到app.vue里面的内容了
    在这里插入图片描述

    6.配置路由

    第一步我们先npm安装vue-router:

    npm i vue-router --save
    

    在和main.js同级的目录下新建router.js,并写入代码,在templates目录下新建首页home.vue来作为刚进入展示的第一个页面
    home.vue代码:

    <template>
      <div>我是home.vue</div>
    </template>
    <script>
    export default {
        data(){
            return {
    
            }
        }
    }
    </script>
    <style>
    </style>
    

    router.js代码:

    // 引入vue、vue路由和相关vue文件
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    // @templates之前在webpack.config.js里面配置过,代表./src/components这个路径的简写
    // @templates/home 就是home.vue
    import Home from '@templates/home'
    
    Vue.use(VueRouter)
        // 防止路由跳转报错
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    }
    
    // 导出路由
    export default new VueRouter({
        routes: [
            {
                path: '/',
                component: Home
            },
            // 重定向 所以是访问/home的时候重定向到上面的/路径去
            {
                path: '/home',
                redirect: '/'
            }
        ]
    })
    

    然后在main.js中引入路由

    在这里插入图片描述
    然后在app.vue中增加路由
    在这里插入图片描述
    最后重启服务,用浏览器访问 localhost:3000,它会自动跳转到localhost:3000/#/这个路径,/这个路径就是首页
    在这里插入图片描述
    还配置了重定向,访问localhost:3000/#/home试试,果然,还是跳转到localhost:3000/#/了,所以重定向也成功了!

    7.一些报错

    1.出现 peer 关键字,下面的报错意思就是 vue-loader需要依赖 css-loader这个包,只要安装css-loader包就行了
    在这里插入图片描述

    8.参考

    https://blog.csdn.net/weixin_43090018/article/details/109570260

    展开全文
  • github: https://github.com/FranckFreiburger/http-vue-loader index.html <!doctype html> <html lang="en"> <head> <script src=...

    doc

    index.html

    <!doctype html>
    <html lang="en">
    
    <head>
      <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
      <script src="https://unpkg.com/http-vue-loader"></script>
    </head>
    
    <body>
      <div id="app">
        <my-component></my-component>
      </div>
    
      <script type="text/javascript">
    
        new Vue({
          el: '#app',
          components: {
            'my-component': httpVueLoader('my-component.vue')
          }
        });
      </script>
    </body>
    
    </html>
    

    my-component.vue

    <template>
      <div class="hello">
        Hello {{who}}
      </div>
    </template>
    
    <script>
    // 不支持 import
    module.exports = {
      data: function () {
        return {
          who: 'world',
        };
      },
      components: {},
    };
    </script>
    
    <style>
    .hello {
      background-color: #ffe;
    }
    </style>
    
    

    使用 sass

    <!-- 可选,使用sass -->
    <script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.worker.min.js"></script>
     
    <script type="text/javascript">
    // 可选, 使用scss
    httpVueLoader.langProcessor.scss = function (scssText) {
      return new Promise(function (resolve, reject) {
        Sass.compile(scssText, function (result) {
          if (result.status === 0)
            resolve(result.text)
          else
            reject(result)
        });
      });
    }
    </script>
    

    使用 less

    <!-- 使用 less -->
    <script src="https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js"></script>
    
    <script type="text/javascript">
    httpVueLoader.langProcessor.less = function (lessText) {
      return new Promise(function (resolve, reject) {
        less.render(lessText, {}, function (err, css) {
          if (err) {
            reject(err)
          } else {
            resolve(css.css);
          }
        })
      })
    }
    </script>
    

    参考
    Getting started with Sass.js
    https://github.com/FranckFreiburger/http-vue-loader/issues/20

    展开全文
  • vue-loader教程介绍

    2021-06-17 00:40:37
    在最初使用webpack+vue时,看到vue里面各种语法,包括...vue-loader功能如图,webpack的功能就是将左侧用户编写的代码(只要有相应的loader,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js。vue-lo...

    在最初使用webpack+vue时,看到vue里面各种语法,包括import,export,html和css的写作方式,我都能依葫芦画瓢地实现各种功能,但是为什么能这样写,一直不太理解,直到我了解了vue-loader。

    vue-loader功能

    如图,webpack的功能就是将左侧用户编写的代码(只要有相应的loader,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js。

    vue-loader就是告诉webpack如何将vue格式的文件转换成js。

    67d0d15b7cdc823d273a1afc1156f503.png

    vue组件格式

    .vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 ,

    {{ msg }}

    export default {

    data() {

    return {

    msg: 'Hello world!'

    }

    }

    }

    .example {

    color: red;

    }

    This could be e.g. documentation for the component.

    vue-loader 会解析文件,提取每个语言块,如有必要会通过其它 loader 处理,最后将他们组装成一个 CommonJS 模块,module.exports 出一个 Vue.js 组件对象。

    vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模版语言,通过设置语言块的 lang 属性。例如,你可以像下面这样使用 SASS 语法编写样式:

    /* write SASS! */

    Src 导入

    如果喜欢分隔你的 .vue 文件到多个文件中,你可以通过 src 属性导入外部文件:

    需要注意的是 src 导入遵循和 require() 一样的规则,这意味着你相对路径需要以 ./ 开始,你还可以从 NPM 包中直接导入资源,例如:

    在自定义块上同样支持 src 导入,例如:

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • webpack 、vue-loadervue-template-compiler报错 报错信息:ERROR in ./src/vue/App.vue Module build failed (from ./node_modules/vue-loader/index.js): TypeError: Cannot read property ‘vue’ of undefined...

    webpack打包报错

    报错信息:ERROR in ./src/vue/App.vue

    Module build failed (from ./node_modules/vue-loader/index.js):
    TypeError: Cannot read property ‘vue’ of undefined
    at Object.module.exports (C:\Users\zyy\Desktop\code\learnVue\node_modules\vue-loader\lib\loader.js:61:18)
    @ ./src/index.js 8:0-31 13:7-10
    终端报错信息
    在这里插入图片描述
    各位大神路过看看错误!
    在使用webpack打包的时候报错了,网上查了一圈,有的是说,webpack和vue-loader的版本不兼容,可是我改了,还是不行!
    希望有大神知道怎么解决的,告诉我一下!谢谢!

    展开全文
  • ./node_modules/vue-loader-v16/dist??ref–0-1!./src/App.vue?vue&type=script&lang=js 场景 因为安装element-plus后把app.vue里的代码替换了,找不到HelloWorld.vue或者里边的引用,所以报错了,此错
  • 安装了vue-loader vue-template-compiler -D 成功之后运行 vue-loader -V和vue-template-compiler -v提示不是内部文件.但是在package.json 里发现已经安装了版本.相关代码// package里的版本: "vue-loader": "^...
  • http-vue-loader

    2021-08-05 04:27:13
    If you are using vue-cli@2.x, it will be pulling the dist branch instead, which provides more configurable options thanks to new features in vue-cli@2.x. It is recommended to upgrade vue-cli as soon ...
  • vue3 解决 cnpm install 报错 Cannot find module 'vue-loader-v16/package.json 问题描述 使用vue3 create vue3_demo创建项目, 为了节省空间,删除node_modules目录, 使用cnpm install命令下载依赖库, 运行cnpm...
  • vue-cli项目启动时出现Cannot find module ‘vue-loader-v16/package.json’,如下图: 出现原因: 使用npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来,所以这时候我们可以采用国内镜像下载...
  • 问题:webpack+vue-loader不能解析vue文件中的style标签。去掉style标签或者内联样式就是可以的vue文件:<template><div class="example">{{ msg }}</div></template><script>export ...
  • html页面引入vue组件之http-vue-loader.js

    千次阅读 2021-04-05 21:13:16
    1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </template> <script> module.exports = { data: function() { return { who.
  • 原因在于使用npm安装依赖的时候vue-loader-v16有部分资源因为网络问题下载不下来,换成国内镜像下载cnpm 下载 先卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 再使用cnpm安装vue-loader-v16依赖 ...
  • webpack 安装vue组件的加载器vue-loader出现报错 报错内容:找不到vue-loader/lib/plugin这个路径 不知道是不是bug 新版vue-loader16.3没有/lib/plugin这个路径 可能是网络丢包 或是其他原因 就算配置了也会出现报错 ...
  • Vue启动报错 This relative module was not found: * ./utils/api in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!...vue-loader-options!./src/views/Lo
  • vue-loader本质上是一个 webpack 的 loader 一.loader: 当然,说起vue-loader,就不得不说一下loader了,在webpack官方文档中对loader的解释是: loader 用于对模块的源代码进行转换。它可以使你在import或"加载"模块...
  • vue3.0启动提示Error: Cannot find module ‘vue-loader-v16/package.json‘ 1、卸载vue-loader-v16依赖 npm uninstall vue-loader-v16 2、重新安装vue-loader-v16依赖 cnpm i vue-loader-v16
  • vue3.0启动提示Error: Cannot find module ‘vue-loader-v16/package.json‘ node和vue升级到最新版本, 用npm安装依赖 别用cnpm, 完美解决
  • 项目编译完成,执行npm run serve启动时,报以上错误,原因在于使用npm安装依赖的时候vue-loader-v16有部分资源未下载下来,解决方式: 第一步:先卸载未正确安装的vue-loader-v16 npm uninstall vue-loader-v16 ...
  • npm WARN @vue/cli-plugin-eslint@4.5.11 requires a peer of eslint@>= 1.6.0 < 7.0.0 but none is installed. You must install peer dependencies yourself. npm WARN eslint-loader@2.2.1 requires a peer of ...
  • 先删除项目的node_modules文件夹,然后在项目的cmd命令行窗口执行:npm run serve,提示错误:ERROR Error: Cannot find module 'vue-loader-v16/package.json' 解决方法 在cmd命令行窗口中执行:cnpm i --save-...
  • 前言之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这...vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码。它会根据 lang 属性自动用适当的加载器去处理。CSS例如,...
  • Vue-loader 会解析文件,提取出每个语言块,如果有必要会通过其他 loader 处理,最后将他们组装成一个 commonjs 模块;module.exports 出一个 Vue.js 组 件对象; Vue-loader的用途可以从以下四个方面阐述它的用途...
  • node版本问题 错误版本:11.14.0 可用版本:14.15.1
  • ERROR Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree. 解决办法 npm i -D vue-loader@14 如果还是报错执行 rm -rf node_modules rm package-lock.json npm cache clear --...
  • cnpm i vue-loader-v16
  • 遇到这个问题不要跟提示去下载缺少的依赖,可能你在npm安装包的时候丢失文件,操作如下 1.删除node_modules依赖包 2.使用 yarn 重新 下载依赖(未安装yarn的 先安装yarn执行命令 npm install -g yarn) ...
  • ERROR Error: Cannot find module 'vue-loader-v16/package.json' Error: Cannot find module 'vue-loader-v16/package.json' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,107
精华内容 21,642
关键字:

vue-loader

vue 订阅