总结梳理：webpack 中如何使用 vue：

安装 vue 的包：cnpm i vue -S
由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义的组件，所以需要安装这种文件的 loader：cnpm i vue-loader vue-template-compiler -D
在 main.js 中导入 vue 模块：import login from './login.vue'
定义一个 .vue 结尾的组件，其中，组件有三部分组成：template script style
使用 import login from './login.vue' 导入这个组件
创建 vm 的实例 var vm = new Vue({ el : '#app',render: c => c(login) })
在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域

1.直接在文件入口（main.js）引入vue

import Vue from 'vue';

2.在项目文件中新建模板文件并在 main.js 中引入

// 导入 login 组件
// 默认，webpack 无法打包 .vue 文件，需要安装相关的 loader：
// cnpm i vue-loader vue-template-compiler -d
// 在配置文件中，新增 loader 配置项 { test:/\.vue$/,use:'vue-loader' }
import login from './login.vue'

4.安装相应包并新增 loader 配置项

安装命名：cnpm i vue-loader vue-template-compiler -D
在 wepack.config.js 中的 module.exports={} >module:{} >rules:[] 中添加下面配置

// 配置处理 .vue 文件的第三方 loader 规则
{test: /\.vue$/, use: 'vue-loader'}

注意：vue-loader@15.*之后，必须添加VueLoaderPlugin插件
1.在 wepack.config.js 中引入 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2.在 module.exports >plugins:[] 里添加 new VueLoaderPlugin()

5.把模块引入到 index.html 页面

1.在 main.js 中

let vm = new Vue({el: '#app',data: {msg: '我是 vue ！'},methods:{},// components: {//     // 无法通过这种方式引入//     login// }// render: function (createElement) {//     // 在 webpack 中，如果想要通过 vue ，把一个组件放到页面中去//     // 展示，vm 实例中的 render 函数可以实现//     return createElement(login);// },// 上面的缩写形式render: c => c(login)
});

2.在 index.js 中

<div id="app"></div>

vue——44-webpack打包vue-阉割版相关推荐

【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本 "publish": " webpack --config webpack.publish.config.js -p ...
vue打包放到Java项目里_【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本"publish": " webpack --config webpack.publish.config.js -p& ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑...
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
[vue] webpack打包vue速度太慢怎么办？
[vue] webpack打包vue速度太慢怎么办? 升级webpack4,支持多进程个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
webpack打包vue项目之后dist文件夹在本地跑起来
webpack打包vue项目之后dist文件夹在本地跑起来转载为:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主亲测, ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
使用webpack打包vue项目
使用webpack打包vue项目安装webpack工具,安装方式有两种:全局安装(命令:npm install -g webpack webpack-cli)以及安装在项目中,这里使用第二种: // ...
WebPack实战 WebPack打包Vue项目
文章目录前言一.使用webpack来进行vue-cli模块化开发二.Webpack配置区分开发环境和生产环境三.vue项目打包 3.1.config-index.js文件 3.2.build- ...

vue——44-webpack打包vue-阉割版

总结梳理：webpack 中如何使用 vue：

1.直接在文件入口（main.js）引入vue

2.在项目文件中新建模板文件并在 main.js 中引入

4.安装相应包并新增 loader 配置项

5.把模块引入到 index.html 页面

vue——44-webpack打包vue-阉割版相关推荐

最新文章

热门文章

vue——44-webpack打包vue-阉割版

总结梳理：webpack 中如何使用 vue：

1.直接在文件入口（main.js）引入vue

2.在项目文件中新建模板文件并在 main.js 中引入

4.安装相应包 并 新增 loader 配置项

5.把模块引入到 index.html 页面

vue——44-webpack打包vue-阉割版相关推荐

最新文章

热门文章

4.安装相应包并新增 loader 配置项