webpack vue 配置
vue-loader
1.)首先创建项目目录
--vue-loader文件夹
|-index.html 入口文件
|-main.js 入口文件
|-App.vue Vue文件
|-package.json 工程文件
|-webpack.config.js webpack 配置文件
2.)基于webpack模块化开发ES6
关于项目前准备工作
①、建一个文件夹，文件夹就是你的项目名称，然后把必须的问价加在其中
|-index.html
|-main.js
|-App.vue
|-package.json(生成方法，在问价夹中打开命令行工具，输入命令：npm init --yes)
|-webpack.config.js
②、在index.html中，在body中添加一个标签(组件)，例如：<App></App>(官方建议大写开头)。
③、配置webpack,
module.exports={
entry:'./main.js', //规定入口(官方推荐名字：main.js)
output：{
path:__dirname, //得到当前的目录，是把当前路径变为绝对路径
filename:'bundle.js' //出口文件(官方推荐名字：bundle.js)
}
}
·在index.html中引入bundle.js
·webpack需要下载的模块 webpack 、webpack-dev-server
·修改package.json的scripts的参数为
"script":{
"dev":"webpack-dev-server --inline --hot" //这个就是我们保存完修改的代码后，浏览器自动刷新热加载，如果端口被占用，可以在后面加 --port 8801(端口号自己定义)
}
④、.vue文件由三部分组成
<template></tenplate> //放html代码
<script></scritp> //放js代码
<style></style> //放css代码
想要把这些代码转译成正常的html、css、js代码，需要配置下载一系列模块(--save-dev可以默认配置你的配置文件)
配置这些文件需要在webpack.config.js中添加一个
module：{
loaders：{
{test:/|.vue$/,loader:'vue'} //以.vue结尾的文件用vue-loader来转译
}
}
vue-loader 、vue-style-loader 、vue-html-loader 、vue-hot-reload-api 、css-loader(这些是用来编译css，html，js代码的)
babel-core 、babel-loader 、babel-plugin-transform-runtime 、babel-preset-es2015 、babel-runtime (这些是必备的配置)
⑤、编辑入口文件main.js文件，import App from './App.vue'，默认进去打开App.vue
一、项目结构图
二、具体代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<app></app> <!-- 组件名称 -->
<script src="build.js"></script>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue' new Vue({
el:'body',
components:{
app:App
}
});
package.json
{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8082"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack":"^1.13.3",
"webpack-dev-server":"^1.16.2"
},
"dependencies": {
"vue": "^1.0.28"
}
}
App.vue
<template>
<h1>welcome Vue</h1>
<h2 @click="change">{{msg}}</h2>
<my-menu></my-menu>
</template>
<script>
import News from './components/News.vue' //新组建的链接位置 export default{
data(){
return {
msg:'welcome to sunsanfeng home'
}
},
methods:{
change(){
this.msg='是你改变了我'
}
},
components:{
'my-menu':News //又定义了一个新的 组件
}
}
</script>
<style>
body{
background: #ccc
}
</style>
webpack-config.js
module.exports={
entry:'./main.js',
output:{
path:__dirname,
filename:'build.js'
},
module:{
loaders:[
{test:/\.vue$/, loader:'vue'}, //规定以.vue结尾的文件，用vue-loader来解析
{test:/\.js$/, loader:'babel', exclude:/node_modules/} //以.js结尾的文件用vue-hot-reload-api解析，除了node_nodules文件夹里的文件
]
},
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
};
以上代码中的注释在项目中会报错，粘走时不要删掉注释，对于node_nodules里面的配置，我们直接npm install一下就可以了
demo下载地址： http://pan.baidu.com/s/1qYfm0VE
webpack vue 配置的更多相关文章
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- vue 一些webpack的配置详解
最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...
- vue中webpack的配置理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- 快速配置webpack+vue项目
第一步:初始化项目 1.npm init 2. package name: (webpack+vue) webpackvue version: (1.0.0) description: this is ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
随机推荐
- 玩转mongodb（九）：通过log4jmongo来实现分布式系统的日志统一管理
背景 在分布式系统中,我们有多个web app,这些web app可能分别部署在不同的物理服务器上,并且有各自的日志输出.当生产问题来临时,很多时候都需要去各个日志文件中查找可能的异常,相当耗费人力. ...
- Telegram学习解析系列(一)：认识一下Telegram的源码
前言: Telegram不知道有多少同行听过这玩意,或者在看它的源码.我是出于工作原因才接触到这东西,看的真是的......变方了!一个月估计刚刚找到门,还没进去多深,把自己的心得和对源码的认识以及我 ...
- 从Python小白到第一个小游戏发布
1.安装必要的环境(附图两张) 直接下载安装程序,本人win10系统,根据电脑系统下载并安装对应的python.exe,安装路径可以选择D盘的,具体安装细节这里就不说了,不知道的可以留言或者找度娘 2 ...
- 通过HPS控制FPGA端的GPIO
该笔记主要记录HPS端如何通过AXI Bridge控制FPGA端口的GPIO,主要是如何操作FPGA侧的Led 1.AXI Bridge AXIB主要包括H2FB.F2HB.LWH2F ...
- Oracle 12C 新特性之非分区表转分区表online clause（不停业务+索引有效）
12c以前非分区表需要转换为分区, 如果不停业务的话可以使用在线重定义,只有在表进行切换的时候会有短暂的锁表. 12c 中alter table online clause 实现了表上现有的索引有效, ...
- 域名系统DNS和FTP
域名系统概述 域名系统DNS(Domain Name System)是英特网使用的命名系统,用于把便于人们使用机器名字转化为IP地址. 为什么机器在处理IP数据报时要使用IP地址而不使用域名呢?IP地 ...
- 编写第一个python selenium程序（二）
上节介绍了如何搭建selenium 系统环境,那么本节来讲一下如何开始编写第一个自动化测试脚本. Selenium2.x 将浏览器原生的API封装成WebDriver API,可以直接操作浏览器页面里 ...
- iOS安全攻防之结构体保护使用
Objective-C 代码很容易被 hook,因此需要对一些重要的业务逻辑进行保护,可以改用结构体的形式,把函数名隐藏在结构体里,以函数指针成员的形式存储.这样编译后只留了下地址,去掉了名字和参数表 ...
- Dom元素的Property和Attribute
Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.fir ...
- Python 的枚举 Enum
枚举是常用的功能,看看Python的枚举. from enum import Enum Month = Enum('Month', ('Jan', 'Feb', 'Mar', 'Apr', 'May' ...