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
1 <!DOCTYPE html>2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <app></app> <!-- 组件名称 -->
9 <script src="build.js"></script>
10 </body>
11 </html>
main.js
1 import Vue from 'vue'2 import App from './App.vue'
3
4 new Vue({
5 el:'body',
6 components:{
7 app:App
8 }
9 });
package.json
1 {2 "name": "vue-loader-demo",
3 "version": "1.0.0",
4 "description": "",
5 "main": "main.js",
6 "scripts": {
7 "dev": "webpack-dev-server --inline --hot --port 8082"
8 },
9 "keywords": [],
10 "author": "",
11 "license": "ISC",
12 "devDependencies": {
13 "babel-core": "^6.17.0",
14 "babel-loader": "^6.2.5",
15 "babel-plugin-transform-runtime": "^6.15.0",
16 "babel-preset-es2015": "^6.16.0",
17 "babel-runtime": "^6.11.6",
18 "css-loader": "^0.25.0",
19 "vue-hot-reload-api": "^1.3.2",
20 "vue-html-loader": "^1.2.3",
21 "vue-loader": "^8.5.4",
22 "vue-style-loader": "^1.0.0",
23 "webpack":"^1.13.3",
24 "webpack-dev-server":"^1.16.2"
25 },
26 "dependencies": {
27 "vue": "^1.0.28"
28 }
29 }
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
1 module.exports={2 entry:'./main.js',
3
4 output:{
5 path:__dirname,
6 filename:'build.js'
7 },
8
9 module:{
10 loaders:[
11 {test:/\.vue$/, loader:'vue'}, //规定以.vue结尾的文件,用vue-loader来解析
12 {test:/\.js$/, loader:'babel', exclude:/node_modules/} //以.js结尾的文件用vue-hot-reload-api解析,除了node_nodules文件夹里的文件
13 ]
14 },
15 babel:{
16 presets:['es2015'],
17 plugins:['transform-runtime']
18 }
19 };
以上代码中的注释在项目中会报错,粘走时不要删掉注释,对于node_nodules里面的配置,我们直接npm install一下就可以了
demo下载地址: http://pan.baidu.com/s/1qYfm0VE
以上是 webpack vue 配置 的全部内容, 来源链接: utcz.com/z/376747.html