Vue之webpack之vue

第一步：

npm init -y

第二步：

npm install --save-dev vue

第三步：

npm i --save-dev vue-loader vue-template-compiler

第四步：

npm install webpack webpack-cli --save-dev

添加配置文件：webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {entry: './src/main.js',output:{path: path.resolve(__dirname,'dist'),filename :'bundle.js'},plugins:[new VueLoaderPlugin()],  module:{rules:[{  test:  /\.vue$/,  use:'vue-loader'}]},resolve:{alias:{"vue$":"vue/dist/vue.js"}}}

package.json文件如下：

{"name": "webpack_vue","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vue": "^2.6.11","vue-loader": "^15.8.3","vue-template-compiler": "^2.6.11","webpack": "^4.41.4","webpack-cli": "^3.3.10"}
}

编写一个index.html文件如下：

<!DOCTYPE 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>Document</title>
</head>
<body><div id="app"><p>{{msg}}</p><login></login></div><script src="../dist/bundle.js"></script>
</body>
</html>

编写一个main.js

import Vue from 'vue'
import login from './login.vue'var vm = new Vue({el: '#app',data: {msg: '123'},components:{login}})

再写一个vue的组件 login.vue

<template><h1>helloword</h1>
</template>

效果如下：

Vue之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& ...
在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1><div id="app"><login ...
如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
前端进阶（三） webpack处理vue以及vue-cli脚手架环境
webpack处理vue 安装 vue yarn add vue vue单文件组件 single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件 ...
vue使用webpack创建项目的命令
vue init webpack my_project
webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...

Vue之webpack之vue

Vue之webpack之vue相关推荐

最新文章

热门文章