用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json，如果需要自行配置，去掉-y即可
安装各种依赖项
npm install --save vue 安装vue2.0
npm install --save-dev webpack webpack-dev-server 安装webpack以及webpack测试服务器 //默认安装最新版2.x版本
npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法
npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件
npm install --save-dev css-loader file-loader 用来解析css
编写页面
新建目录src，里面新建App.vue
<!-- 简单写个title和一个循环 -->
<template>
<div id="example">
<h1>{{ msg }}</h1>
<ul>
<li v-for="n in 5">{{ n }}</li>
</ul>
</div>
</template> <script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script> <style scoped>
#example {
background:#000000;
color:#fff;
height: 100vh;
}
</style>
在src目录下新建main.js
/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue' /* 实例化一个vue */
new Vue({
el: '#app',
render: h => h(App)
})
配置webpack
在根目录下新建webpack.config.js
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack'); module.exports = {
/* 输入文件 */
entry: './src/main.js',
output: {
/* 输出目录，没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录，可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
}
]
}
}
打包项目
npm install -g webpack 全局安装webpack，以便使用webpack命令
webpack 用webpack命令打包项目，这是目录下会多出一个dist文件夹，查看里面会有build.js，发觉里面的es6语法已经被转化了
最终项目目录如图所示
在根目录下新建index.html，引入build.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
<section id="app"></section>
<script src="./dist/build.js"></script>
</body>
</html>
页面如图所示
这样就算打包完成了，但是每修改一次都要重新打包这样显然没有任何效率，于是需要线上的热重载
npm install -g webpack-dev-server 全局安装webpack-dev-server，以便使用webpack-dev-server命令
webpack-dev-server 等待程序运行完毕
在浏览器输入http://localhost:8080/查看页面
这时修改页面的代码，不用刷新浏览器直接更改
转载自 https://segmentfault.com/a/1190000008166081 ，感谢博主如此详细精简的实例！
用webpack2.0构建vue2.0单文件组件超级详细精简实例的更多相关文章
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- webpack2.0构建vue2.0超详细精简版
原文地址:http://blog.csdn.net/dahuzix/article/details/55549387 npm init -y 初始化项目 安装各种依赖项 npm install --s ...
- Vuejs - 单文件组件
为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...
- vue单文件组件的构建
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- vue1.0与vue2.0对于v-for的使用的区别
vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
随机推荐
- C. Edgy Trees
链接 [https://codeforces.com/contest/1139/problem/C] 题意 给你n个点,n-1个边,无向的.有red和black的. k表示经过这k个点.可以跨其他点 ...
- urllib库
python内置的最基本的HTTP请求库,有以下四个模块: urllib.request 请求模块 urllib.error 异常处理模块 urllib.parse url解析模块 urllib.ro ...
- 黑客帝国效果赏析（包含ES6的语法）
首先,看看效果吧. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- Day9 Python基础之函数基础（七）
参考链接:https://www.cnblogs.com/yuanchenqi/articles/5828233.html 1.函数的定义 定义: 函数是指将一组语句的集合通过一个函数名封装起来,要想 ...
- iOS中的截屏（屏幕截屏及scrollView或tableView的全部截屏）
iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏) 2017.03.16 12:18* 字数 52 阅读 563评论 4喜欢 2 1. 截取屏幕尺寸大小的图片并保存至相册 ...
- IDEA通过Git同步代码到Coding
准备工作: (1)在本地创建好项目 (2)在coding创建好项目,并设置公开 1.创建Git仓库 2.选择对应的本地项目文件夹 以上两步相当于在项目文件夹中git bash here 并 ...
- 设置永久环境变量linux
========================================================================== http://www.cnblogs.com/Bi ...
- [转帖]批处理-For详解
批处理-For详解 https://www.cnblogs.com/DswCnblog/p/5435300.html for 循环的写法 感觉非常好. 今天下午的时候简单测试了下. 多学习提高 非常重 ...
- zookeeper的安装和启动教程
zookeeper的安装和启动 zookeeper安装包所在目录: 上传文件到虚拟机.现在本地新建一个目录setup,将zookeeper压缩包复制进去. ALT+P打开一个标签,操作如下put命令. ...
- Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-
Maven项目报错:Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clea ...