webpack集成vue-loader

  1. 创建一个文件夹 test_webpack_vue
  2. 在 test_webpack_vue 下新建目录 src
  3. 在 src 目录下 新建文件 index.html ,内容为
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>
  1. 在src下 新建文件 main.js 内容为 console.log("test");
  2. 在 test_webpack_vue 目录下,新建文件 .babelrc 内容为
{

  "presets": ["env", "stage-0"],

  "plugins": ["transform-runtime"]

}
  1. 在 test_webpack_vue 目录下,新建文件 package.json 内容为
{

  "name": "test-vue-webpack",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server --open --port 2198 --hot"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "babel-core": "^6.26.3",

    "babel-loader": "^7.1.5",

    "babel-plugin-transform-runtime": "^6.23.0",

    "babel-preset-env": "^1.7.0",

    "babel-preset-stage-0": "^6.24.1",

    "bootstrap": "^3.4.1",

    "css-loader": "^3.2.0",

    "file-loader": "^4.2.0",

    "html-webpack-plugin": "^3.2.0",

    "less": "^3.10.3",

    "less-loader": "^5.0.0",

    "node-sass": "^4.12.0",

    "sass-loader": "^7.3.1",

    "style-loader": "^1.0.0",

    "url-loader": "^2.1.0",

    "webpack": "^4.39.3",

    "webpack-cli": "^3.3.7",

    "webpack-dev-server": "^3.8.0"

  },

  "description": ""

}
  1. 在 test_webpack_vue 目录下,新建文件 webpack.config.js 内容为
//webpack是基于node进行构建的,所以支持node语法

var path = require("path");

//在内存中生成模版页面

var htmlWebpackPlugin = require("html-webpack-plugin");

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件

//这时会检查项目中的配置文件,并读取这个文件

module.exports = {

    entry: path.join(__dirname, "./src/main.js"),//入口文件

    output: {

        path: path.join(__dirname, "./dist"),//输出路径

        filename: "bundle.js"//执行输出文件的名称

    },

    plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径

            filename: "index.html"//设置内存中页面名称

        })

    ],

    module: { // 用来配置第三方loader模块的

        rules: [ // 文件的匹配规则

            //处理css文件的规则

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

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

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

            //小于等于 limit 不进行base64编码

            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},

            //处理字体文件的loader,bootstrap小图标就是使用这个

            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},

            // 配置 babel-loader 来转换高级的ES语法

            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},

        ]

    }

};
  1. 在 test_webpack_vue 目录下执行命令 npm init -y
  2. 再执行命令 npm i
  3. 执行 npm run dev 正确打印 test ,且不报错误
  4. 执行 npm i vue -S
  5. 在 main.js 中添加内容
import Vue from '../node_modules/vue/dist/vue.js'

new Vue({

   el:"#app",

    data:{

       info:"这是测试信息",

    }

});



13. 在 index.html 的 body 标签中添加

<div id="app">

    <span v-text="info"></span>

</div>



14. 执行 npm run dev ,控制台无错误

15. 把 main.js 内容导入 Vue 的注释,新增一行 import Vue from 'vue' ,把 info 的内容后面加 1 , 此时 main.js 内容为

console.log("test");

//import Vue from '../node_modules/vue/dist/vue.js'

import Vue from 'vue'

new Vue({

   el:"#app",

    data:{

       info:"这是测试信息1",

    }

});
  1. 在 webpack.config.js 中的 module 后加 , ,再添加
    resolve: {

        alias: { // 修改 Vue 被导入时候的包的路径

            "vue$": "vue/dist/vue.js"

        }

    }



17. 执行 npm run dev ,控制台无报错,

18. 现在整合 .vue 文件,在 src 目录下创建 login.vue 内容为

<template>

    <div>

        <h1>render_我是login.vue</h1>

    </div>

</template>

<script>

</script>

<style>

</style>
  1. index.html 内容为
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <login></login>

</div>

</body>

</html>
  1. main.js 内容改为
import Vue from 'vue'

import login from './login.vue'

new Vue({

    el: "#app",

    render: diy => diy(login)

});
  1. 执行 npm i vue-loader vue-template-compiler -S
  2. 把 webpack.config.js 中的 resolve 模块注释掉,并添加了 .vue 的匹配规则,再添加内容var VueLoaderPlugin=require('vue-loader/lib/plugin'); 为了使 vue-loader 生效,再在 plugins 模块中添加 new VueLoaderPlugin(), ,修改后的 整个文件内容为
//webpack是基于node进行构建的,所以支持node语法

var path = require("path");

//在内存中生成模版页面

var htmlWebpackPlugin = require("html-webpack-plugin");

//vue-loader使用

var VueLoaderPlugin=require('vue-loader/lib/plugin');

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件

//这时会检查项目中的配置文件,并读取这个文件

module.exports = {

    entry: path.join(__dirname, "./src/main.js"),//入口文件

    output: {

        path: path.join(__dirname, "./dist"),//输出路径

        filename: "bundle.js"//执行输出文件的名称

    },

    plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径

            filename: "index.html"//设置内存中页面名称

        }),

        new VueLoaderPlugin(),

    ],

    module: { // 用来配置第三方loader模块的

        rules: [ // 文件的匹配规则

            //处理css文件的规则

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

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

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

            //小于等于 limit 不进行base64编码

            {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},

            //处理字体文件的loader,bootstrap小图标就是使用这个

            {test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader'},

            // 配置 babel-loader 来转换高级的ES语法

            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},

            // 配置 vue-loader 来处理 .vue 文件

            { test: /\.vue$/, use: 'vue-loader' },

        ]

    },

    // resolve: {

    //     alias: { // 修改 Vue 被导入时候的包的路径

    //         "vue$": "vue/dist/vue.js"

    //     }

    // }

};
  1. 现在的项目结构是
  2. 执行 npm run dev ,控制台没有报错,组件正常显示
  3. 结合这篇文章 export default 与 export 可以设置 从 login.vue 中传数据到 main.js 接收,在控制台打印出来,在
  4. 在login.vue 内容为
<template>

    <div>

        <h1>render_我是login.vue</h1>

        <h2 v-text="login_info"></h2>

    </div>

</template>

<script>

    export default {

        // 注意：组件中的 data 必须是 function

        data()

        {

            return {

                login_info: "我是login.vue中的login_info值..."

            }

        },

        methods: {

            login_show()

            {

                console.log("我是login.vue中的login_show方法...")

            }

        }

    }

</script>

<style>

</style>
  1. 在 main.js 内容为
import Vue from 'vue'

import login from './login.vue'

new Vue({

    el: "#app",

    render: diy => diy(login),

    created()

    {

        console.log(login.data().login_info);

        login.methods.login_show()

    }

});
  1. 执行 npm run dev

webpack整合 .vue 文件,集成 vue-loader的更多相关文章

  1. webpack打包.vue文件

    在webpack中配置.vue组件页面的解析(vue-loader) 结合webpack使用vue-router 在webpack中配置.vue组件页面的解析 1.运行npm i vue -S将vue ...

  2. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

  3. vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]

    后端DEMO:https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO:https://github.com/coderliguoqing/ ...

  4. webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  5. webpack配置打包vue文件

    1.首先全局安装node,和npm.检查是否安装成功 2.新建一个文件下,进入该文件夹. 前先执行 npm init -y 然后就会在文件夹下出现一个package.json文件 然后执行 npm i ...

  6. vue.js使用webpack发布，部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  7. Vue系列之 => webpack处理样式文件

    处理css文件 安装 npm i style-loader css-loader -D main.js import $ from 'jquery' //Es6中导入模块的方式 import './c ...

  8. 集成vue到jquery/bootstrap项目

    说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现.现在,使用vue开发,集成vue到原先的项目中.不影响原先的框架. ...

  9. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

随机推荐

  1. 批量执行（Linux命令，上传/下载文件）

    前言: 每个公司的网络环境大都划分 办公网络.线上网络,之所以划分的主要原因是为了保证线上操作安全: 对于外部用户而言也只能访问线上网络的特定开放端口,那么是什么控制了用户访问线上网络的呢? 防火墙过 ...

  2. Grafana添加Zabbix为数据源（一）

    最前面,此博文引自:http://docs.grafana-zabbix.org/installation/configuration-sql/ 使用zabbix来收集书籍,用grafana来显示数据 ...

  3. Samrty技术的 初步了解

    <span style="font-size:18px;">Smarty 技术的使用 <?php #smarty 测试 #引入smarty require_onc ...

  4. nginx出现403 Forbidden解决方法

    由于开发需要,在本地环境中配置了LNMP环境,使用的是Centos 7.4 的源码安装,安装一切正常,但是由于默认网站文件夹比较奇葩,于是把网站文件用mv命令移动到了新的目录,并相应修改了配置文件,并 ...

  5. 20180817周在ubuntu上面使用kettle一些总结

    1 ubuntu上面安装mysql用户名和密码问题: ubuntu上面安装MySQL的时候,如果是自动安装,没设置密码的话,那么用户名不是root. 比如在ubuntu用文本工具打开:gedit /e ...

  6. springMVC获取来访地址referer

    @RequestMapping("publishPost.do") public String publishPost(@Valid @ModelAttribute Post po ...

  7. c/c++编码规范(2)--作用域

    2. 作用域 静止使用class类型的静态或全局变量. 6. 命名约定 6.1. 函数名,变量名,文件名要有描述性,少用缩写. 6.2. 文件命名 6.2.1. 文件名要全部用小写.可使用“_”或&q ...

  8. NetCore 对Json文件的读写操作

    nuget Microsoft.Extensions.Configuration; Microsoft.Extensions.Configuration.Json; Newtonsoft.Json; ...

  9. 第二章 kali安装

    @kali安装 本文以虚拟机进行安装(注意:虚拟机安装不等同于物理机安装,在虚拟机安装成功不等于一定能在物理机,U盘安装成功) 下载kali镜像 官方地址:https://www.kali.org/d ...

  10. 产品之我见（2）-求职APP

    在求职过程中使用了BOSS直聘.拉钩.领英这三款软件,下面来讲述一下作为求职者身份的使用感受以及遇到的问题.            一.BOSS直聘 手机端:打开首先是标语“互联网招聘神器”的页面   ...