Vue.js
Vue2从0到1(一)：用webpack打包vue
发布时间：2019-05-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue2从0到1(一)：用webpack打包vue，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
webpack-vue
0.项目初始化
cd 'to/your/path' npm inIT
1.安装 webpack
分为全局安装和项目内安装
npm install webpack -g
npm install webpack --save-dev2.配置webpack.config.js文件
const path = require('path');
module.exports = {
entry: './Script/main.js', //项目入口文件
output:{ //输出编译后文件地址及文件名
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
};命令行里面执行 webpack 命令即可看到编译后的文件
3安装webpack-htML-plugin
npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
...
new HtmlWebpackPlugin({
title:'react 学习',
inject:'body',
filename:'index.html',
template:path.resolve(__dirname, "index.html")
}),
...
]再次执行webpack命令可看到多了一个index.html文件
这个文件是根据模板生成的并自动引入打包生成的js文件
运行打包后的index.html即可看到效果。
4.安装Vue
npm install vue -save修改main.js：
import Vue From 'vue';
VAR MainCtrl = new Vue({
el:'#main',
data:{
message:'Hello world'
}
})修改index.html:
<div id="main">
<h3>{{message}}</h3>
</div> 执行webpack打包运行index.html(打包的文件)报错，经查在webpack.config.js里面配置：
...
resolve: { alias: { 'vue': 'vue/dist/vue.js' } }再次运行即可看到效果
5.安装webpack-dev-server热更新
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev
npm install vue-hot-reload-api --save-dev配置webpack.config.js
...
devServer: {
historyApiFallback: true,
},
...配置package.json里面命令
"start":"webpack-dev-server --hot --inline --PRogress --open"执行 npm start 浏览器自动打开页面，更改文件后即可看到页面实时更新
6.安装babel
在使用.vue文件之前先要安装babel(将es6语法转化为es5)
npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev
npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev 项目根目录新建.babelrc文件、配置：
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}7.安装vue-loader处理.vue的文件
安装loader 处理.css,.vue文件
npm install css-loader style-loader vue-loader vue-html-loader --save-dev配置webpack.config.js
...
module:{
loaders: [
{test: /.js$/,loader: 'babel-loader',exclude: /node_modules/},
{test: /.vue$/,loader: 'vue-loader'}]
},
//vue: {loaders: {js: 'babel'}}
...配置完运行报错：Cannot find module 'vue-template-compiler'
安装vue-template-compiler
cnpm install vue-template-compiler --save-dev修改index.html:
<body>
<div id="main">
<app></app>
</div>
</body>新建src/index.vue:
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>修改main.js
...
import App from './src/index.vue';
new Vue({
el: '#main',
components: { App }
})保存后运行 npm start 即可看到效果
修改代码，即可看到更新后的效果
后面将持续更新vue-router，vuex的内容。代码托管在github上 欢迎star
脚本宝典总结
以上是脚本宝典为你收集整理的Vue2从0到1(一)：用webpack打包vue全部内容，希望文章能够帮你解决Vue2从0到1(一)：用webpack打包vue所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的Vue.js相关文章
- uni-app的优点有哪些 2022-05-23
- Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
- 基于vue2.0的weex实践（前端视角） 2019-05-07
- 手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
- 解决vue报错Failed to mount component 2019-05-07
- Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
- Vue.js—单元测试 2019-05-07
- vue2.0脚手架的安装和项目搭建 2019-05-07
- Vue经典开源项目汇总demo实例github下载教程 2018-12-04
- 使用Vue.js构建Wordpress Gutenberg块 2018-11-17
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新Vue.js教程