用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,可以将单文件组件转换为 ...
随机推荐
- ES6 Promise 详解
一.概念 Promise,从语法上来讲,它是一个对象,是一个构造函数,可以获取 异步操作 的信息. 简单来讲,就是用同步的方式写异步代码,用来解决回调问题. 二.特点 Promise 对象有两个特点: ...
- sqlserver2008 传入的表格格式数据流(tds)协议流不正确。
起因是在sql 2008 里使用 sql prompt 报了一个内部连接致命错误,原本应该想到是数据库连接问题的,奇怪的是能连接上数据库也能查询表仅仅是用不了工具没有智能提示. 几经查询无果,度娘上之 ...
- MySQL 通过多个示例学习索引
最近在准备面试,关于索引这一块,发现很多以前忽略的点,这里好好整理一下 首先为什么要建立索引 一本书,有章.节.段.行这种单位. 如果现在需要找一个内容:第9章>第2节>第3段>第4 ...
- semantic-ui 输入框
1.标准输入框 semantic-ui中定义输入框需要将input标签包含于另外一个标签内,外层标签的class为ui input,注意外层标签可以是div,span.p.i. <div cla ...
- Java Profiling & Profilers
A Guide to Java Profilers | Baeldunghttps://www.baeldung.com/java-profilers 常用 Java Profiling 工具的分析与 ...
- C\C++学习笔记 1
C++记录1 C的头文件为math.h C++的为 cmath using编译指令 namespace 区分不同产品的函数.Mics::cout Linux::cout cout << 即 ...
- MyEclipse配置tomcat报错 - java.lang.UnsupportedClassVersionError: org/apache/lucene/store/Directory : Unsupported major.minor version 51.0
1 开发Servlet程序时,MyEclipse配置好tomcat与JDK之后,启动时控制台报下列错误: 1 java.lang.UnsupportedClassVersionError: org/a ...
- python学习笔记(9)--函数
函数定义: def <函数名>(<参数(0个或多个)>): 函数体 return <返回值> 参数有非可选参数,和可选参数,可选参数放在参数列表的最后,可以为可选参 ...
- DataSet 取值,DataSet行数,DataSet列数 从DataSet中取出特定值
1 DataSet.Table[0].Rows[ i ][ j ] 其中i 代表第 i 行数, j 代表第 j 列数 2 DataSet.Table[0].Rows[ i ].ItemArray[ j ...
- 洛谷 P1141 01迷宫
看似普通的 bfs 题(实际上也不怎么难 主要是我太菜了) 题目链接:https://www.luogu.org/problemnew/show/P1141 如果直接用简单的bfs一顿求的话,会超时( ...