nodejs+webpack+vuejs 搭建开发环境学习套路

发表于 | 阅读次数：
本文字数： 988 | 阅读时长 ≈ 4

官方文档

官方手册

中文官网

vuejs 2.0 中文文档

ECMAScript 6 入门

node.js相关的中文文档及教程

Node.js中文网API

Webpack 中文指南

webpack2.2中文文档

以上是提供的一些官方资料，下面开始我们的套路吧：

环境构建

1.新建一个目录vuepro
2.初始化

1
2
3
4
$ cd vuepro

# 初始化的时候可以一路回车，在最后输入"yes"后会生成package.json文件
$ npm init

3.安装模块，先装这么多，有需要再安装

1
$ npm install vue webpack babel-loader babel-core babel-preset-env babel-cli babel-preset-es2015 html-webpack-plugin --save-dev

4.创建良好的目录层级

1
2
$ mkdir src
$ cd src && mkdir -p html jssrc webapp

html放置模板文件，jssrc放置js文件，最终编译好的文件放置在webapp目录里，这个目录也就是我们网站的目录。

5.在项目根目录下创建webpack配置文件：webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack=require("webpack");
module.exports =
{
    entry:
    {
        //入口文件
        "index":__dirname+'/src/jssrc/index.js',
    },
    output: {
        path: __dirname+'/src/webapp/js',  //输出文件夹
        filename:'[name].js'   //最终打包生成的文件名(只是文件名，不带路径的哦)
    },
    /*resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },*/
    externals: {

    },
    module:{
        loaders:[
            {test:/\.js$/,loader:"babel-loader",query:{compact:true}},
            //这里肯定要加入n个loader 譬如vue-loader、babel-loader、css-loader等等
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/src/webapp/index.html',   //目标文件
            template: __dirname+'/src/html/index.html', //模板文件
            inject:'body',
            hash:true,  //代表js文件后面会跟一个随机字符串,解决缓存问题
            chunks:["index"]
        })

    ]
}

6.同样在根目录下创建babel配置文件：.babelrc

1
2
3
{
    "presets" : ["es2015"]
}

然后就可以在webpack里面配置loader，我们上面webpack配置中已经写了：

1
2
3
4
loaders:[
           {test:/\.js$/,loader:"babel-loader",query:{compact:true}},
  			// 经过测试旧版用的是loader:"babel",在新版中用的是loader:"babel-loader"
       ]

这句话意思就是：凡是 .js 文件都使用 babel-loader , 并且压缩。

学习vue最简单的一个套路

思考：数据如何渲染？

套路如下：

首先要有个数据块标记

vue里面可以像模板引擎一样写上 {\{name\}}

其中 name 就是变量名

接下来进行实战练习

index.htm l如下：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div id="me">
        我的年龄是{age}
    </div>
</body>
</html>

index.js 如下：

1
2
3
4
5
6
import Vue from "vue"; //会去node_modules\vue\package.json

new Vue({
    el:"#me",
    data:{age:18}
})

至此，我们需要用 webpack 打包，打包到 webapp 目录下。

需要修改2个地方：

(1)因为我们的 webpack 不是全局安装的，所以不能直接执行 webpack 命令，我们这里借助 npm 来执行。所以需要修改项目根目录下的 package.json 文件，加入：

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

表示：执行build，就会去node_modules.bin\下去寻找webpack命令。build 这个名字是自定义的。

(2)还需要修改 webpack 配置文件：webpack.config.js

1
2
3
4
5
resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },

我们之前把这个注释掉了，现在打开。此处的意义是找到 node_modules/vue/dist/vue.js

最后，我们就来打包，看看结果是怎样的？

终端里还是cd到项目根目录下，执行：

1
$ npm run build

index.html 就是打包之后的模板文件，js/index.js 就是打包之后的js文件，在 index.html 被引用了。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div id="me">
        我的年龄是{age}
    </div>
<script type="text/javascript" src="js/index.js?43c73980e35f1569ef72"></script></body>
</html>

预览一下index.html:

这样就完成了 vueJS 的一个简单案列

0%