vue+webpack学习记录

时间：2021-04-07 00:09:56

vue+webpack学习记录

本文目录：

前话

2016年已经去了两个多月，已经很久没写博客，可能是还没有养成习惯吧！在过去的2015年，算是真正开始进入编程世界（俗称“撸代码”），从开始学习安卓，再到中途和朋友一起做小项目，开始学习前端，知道现在也算是初入前端的小菜鸟。在新的一年里，新的学期，面临新的选择，在学习新的技术同时，也要开始考虑将来的人生道路（选择 ？ 读研 or 工作 ）

好了，废话说完了！这次写博客主要是为了记录一下是怎么结合vue+webpack。在网上看了很多资料，弄得精疲力尽，可能是之前从来没有用过grunt和gulp这些东西，弄起webpack弄了很久，还有我想结合一下express，发现总是报错，觉得心累。不过vue确实很不错，比我之前做项目总是操作DOM很不一样，很新鲜和简便。

现在记录刚刚摸索出来的使用方法。（建议：多去Google查看各种做法！我就是看完各种做法，就摸索试一下）

安装准备

1.首先，当然是要安装了nodejs啦！（点击官方链接）
2.安装webpack模块，之后可以在命令行使用

npm install webpack -g

3.自己创建一个文件夹vue-webpack,然后运行命令

npm init

然后根据图中所示，创建对应文件夹和文件（main.js不要创建,是由webpack自动生成的）
vue+webpack学习记录

4.安装一些模块

npm install vue vue-loader path express -s

(其中vue-loader:是用于结合webpack解析vue文件的)

代码实现

准备好了之后，就展示主要的代码

首先是index.vue：

<template>
    <h2>Hello world!</h2>
</template>

<style> h2{ color: blue, } </style>

<script> module.exports = { data: function(){ return {}; } } </script>

主页的模板文件。

然后便是index.js:

var Vue = require('vue');
//引入写好的组件
var hello = require('../view/index.vue');

new Vue({
    el: 'body',
    components: {
        v_hello : hello//这里是给组件命名，在HTML中可以使用
    }
});

然后配置以下webpack.config.js:

var path = require('path');

// 定义文件的一些路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');//webpack需要打包处理的文件
var BUILD_PATH = path.resolve(ROOT_PATH, 'public');//webpack最终输出的文件


module.exports = {
    debug: true,
    //设置我们要处理的文件所在文件夹
    entry: APP_PATH,//[APP_PATH+"/index.js",],
    output: {
        path: BUILD_PATH,
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
}

之后，执行命令

webpack

发现在public文件生成了一个main.js文件(好像不设定输出文件名，就默认为main.js)

打开index.html，实现hello world界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <v_hello></v_hello>
    <script src="./main.js"></script>
</body>
</html>

然后再给server.js添加以下路径和设置静态资源文件

//主要代码展示
var app = express();

app.set('views',path.resolve(__dirname,'dist'));
app.set('view engine','ejs');
app.engine('ejs',require('ejs').__express);
app.engine('html',require('ejs').renderFile);//读取html结尾文件

//设置静态文件路径
app.use(express.static(path.resolve(__dirname,'public')));

app.get('/',function(req,res){
    res.render('index.html');
});

终于大功告成了！！！

效果展示

vue+webpack学习记录

vue+webpack学习记录

总结

通过这个demo，我个人感觉webpack的作用，就是将视图和操作的文件的依赖打包处理好，然后生成js，直接使用。但是我现在还是一个简单使用，还是跟官网一样简单的应用。还需要继续摸索的它的便捷性。

最后附上github的demo链接!!!

标签：

相关文章