webpack vue 配置

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

回到顶部