webpack整合 .vue 文件,集成 vue-loader

mac2025-02-12  9

webpack集成vue-loader

创建一个文件夹 test_webpack_vue在 test_webpack_vue 下新建目录 src在 src 目录下 新建文件 index.html ,内容为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 在src下 新建文件 main.js 内容为 console.log("test");在 test_webpack_vue 目录下,新建文件 .babelrc 内容为 { "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] } 在 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": "" } 在 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/}, ] } }; 在 test_webpack_vue 目录下执行命令 npm init -y 再执行命令 npm i 执行 npm run dev 正确打印 test ,且不报错误 执行 npm i vue -S 在 main.js 中添加内容 import Vue from '../node_modules/vue/dist/vue.js' new Vue({ el:"#app", data:{ info:"这是测试信息", } });

在 index.html 的 body 标签中添加 <div id="app"> <span v-text="info"></span> </div>

执行 npm run dev ,控制台无错误 把 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", } }); 在 webpack.config.js 中的 module 后加 , ,再添加 resolve: { alias: { // 修改 Vue 被导入时候的包的路径 "vue$": "vue/dist/vue.js" } }

执行 npm run dev ,控制台无报错, 现在整合 .vue 文件,在 src 目录下创建 login.vue 内容为 <template> <div> <h1>render_我是login.vue</h1> </div> </template> <script> </script> <style> </style> 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> main.js 内容改为 import Vue from 'vue' import login from './login.vue' new Vue({ el: "#app", render: diy => diy(login) }); 执行 npm i vue-loader vue-template-compiler -S把 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" // } // } }; 现在的项目结构是 执行 npm run dev ,控制台没有报错,组件正常显示 结合这篇文章 export default 与 export 可以设置 从 login.vue 中传数据到 main.js 接收,在控制台打印出来,在在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> 在 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() } }); 执行 npm run dev
最新回复(0)