您的位置：首页 > 产品设计 > UI/UE

Webpack + vue-loader构建单文件vue组件

2016-07-21 17:10 911 查看

1.开始

创建下面目录：



修改package.json:

{
"name": "vue",
"version": "0.0.1",
"description": "My vue",
"author": "minixu",
"dependencies": {
"vue": "^1.0.26",
"webpack": "^1.13.1"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
   "vue-html-loader": "^1.2.3",
"vue-loader": "^7.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}


加载依赖模块：

$npm install
如果实在下载不下来建议使用cnpm进行下载：

$npm install cnpm -g
$cnpm install


配置webpack.config.js:

//webpack.config.js
module.exports = {
// 入口文件
entry: './src/main.js',
// 编译输出的文件路径
output: {
//`dist`文件夹
path: './dist',
// 文件 `build.js` 即 dist/build.js
filename: 'build.js',
},
//加载器
module: {
loaders: [{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader'
}, {
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}]
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}


在Vue根目录下创建index.html：

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<App></App>
<script src="dist/build.js"></script>
</body>
</html>


在src目录下创建main.js文件：

//es6加载模块
import Vue from 'vue'
import App from './views/index.vue'

//创建一个vue实例,挂载在body上面
new Vue({ 
    el: 'body',
    components: { App }
})


在src/views目录下创建index.vue:

<pre name="code" class="javascript"><template>
    <p>{{ message }}</p>
    <input v-model="message">
</template>

<script>
    export default{ 
        data(){ 
            return {
                message: 'Hello Vue.js!'
            }
        }
    }
</script>




我们所有需要的文件都准备好了，进行打包：

cmd到文件根目录输入 webpack:



打开index.html：



成功！

2.热加载
我们在上篇webpack中讲了一下热加载，现在我们运用到这个项目上来。
我们在package.json中已经依赖了webpakc-dev-server模块，所以我们直接使用

$webpack-dev-server
看到启动成功



我们修改代码试试：

index.vue:

<template>
<p>{{ message }}</p>
<input v-model="message">
<button v-on:click="reverseMessage">Reverse Message</button>
</template>

<script>
export default{
data(){
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
}
</script>


发现不管是刷新页面还是重启服务都没用。

那我们试试打包：





成功了？？？？？？？？

我们知道打包方式是生成文件到磁盘中 ，而热加载方式是生成文件到内存中。

查下官网关于Webpack-dev-server,发现配置是这样的

var path = require("path");
module.exports = {
entry: {
app: ["./app/main.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets/",
filename: "bundle.js"
}
};


因为我们的index.html中 的路径为dist/build.js

而内存中生成的bulid.js文件路径是不在dist文件夹下的，所以是找不到内存中的bulid.js的，找到的是在改文件夹下我们以前打包的文件。

不信删掉dist/bulid.js试试 。

所以我们需要指定一个 publicPath

修改我们的webpack.config.js:

//webpack.config.js<pre name="code" class="javascript">module.exports = {
// 这是一个主文件包括其他模块
entry: './src/main.js',
// 编译的文件路径
output: {
//`dist`文件夹
path: './dist',
// 文件 `build.js` 即 dist/build.js
filename: 'build.js',
publicPath: '/dist/'
},
module: {
loaders: [{
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue-loader'
}, {
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}]
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
}


再启动一次

$webpack-dev-server


访问http://localhost:8080/webpack-dev-server/

修改index.vue

<template>
<p>{{ message }}</p>
<p> {{ message.split('').reverse().join('') }}</p>
<input v-model="message">
<button v-on:click="reverseMessage">Reverse Message</button>
</template>

<script>
export default{
data(){
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
}
</script>
点开刚刚的页面，哇塞，不用重启不用刷新就变了，好神奇！



3.vue-cli

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航