使用 Webpack+Vue 建立基于 iView 的页面

最近需求变动很快啊…今天基于这个明天构建那个的。多写点东西沉淀一下知识,之后查阅起来会方便很多

文章用到的代码,都可以在githubclone至本地,使用npm install安装依赖,使用npm run build打包后,双击index.html即可看到效果。

1. 起始语

前端技术日新月异,这就导致很多我这样的初级前端三天两头琢磨新工具…上一篇文章使用 Webpack+React 建立基于 Ant Design 的页面,就是因为项目组准备使用 ant design 来重构一个平台,于是我就研究了一把新技术。没想到的是连 Ant Design 的边都还没摸到,项目组又准备用新技术来重构了…这次要用的是基于Vue的组件库iView。Vue 大名鼎鼎,大家应该都知道。那 iView 是个什么东东呢?

其实 iView 是 Ant Design 组件库的另一种实现版本啦,换汤不换药。
就像孙悟空有七十二变,但是不管变成什么,他都是孙悟空。

2. 构建

按照老套路,我们先构建一个基于 webpack 的、使用 Vue 的 Helloworld 程序出来!

1. 要用到的库

"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"vue": "^2.2.6",
"webpack": "^2.3.2"

可以把上文直接复制到package.jsondevDependencies节点里,之后npm install,当然也可以使用 npm 下载到项目中

npm install babel-core babel-loader babel-preset-es2015 vue webpack --save-dev

2. 配置文件

1. babel

babel 的配置文件,从用到的库里就可以看出来,使用了 es2015 的 preset,所以新建一个名为.babelrc的文件,里面写入

{
    presets: [
        "es2015"
    ]
}

2. webpack

webpack.config.js目前来看也很简单,内容如下

module.exports = {
    entry: "./entry.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.js$/,
                exclude: "/node_modules/",
                loader: "babel-loader"
            }
        ]
    }
}

这里面的意思是,项目入口文件为entry.js,会被 webpack 打包成bundle.js,所有用到的 js 文件 (除了 /node_modules 文件夹内的) 都会由babel进行处理。

3. index.html

我们可以很简单的构建一个index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="bundle.js"></script>
</html>

4. entry.js

import Vue from 'vue'
new Vue({
    el: "#app",
    data: {
        message: "HelloWorld!"
    }
})

5. 构建完成 (假)

构建好啦 ~
这时候可以在控制台输入webpack打包,会自动生成bundle.js文件。
我们运行index.html,会看到

一脸懵逼,什么都没有!
还有一个奇怪的报错,仿佛在尽情的愚弄我们!

这是什么意思呢?
错误是告诉我们,我们使用的是运行构建模式,关于这种模式的说明,Vue 的官网是这么说的:

独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项, 你需要编译。
模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项,你就需要编译器。

Soga!我又通过对/node_modules/vue内的package.json的研究,发现其对应的main指向了dist/vue.runtime.common.js,而不是传统的vue.js
怎么解决?其实很简单。打开webpack.config.js,进行一个alias的配置即可。
官网上是这样配置的,我们可以参照

// ...
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
}
// ...

5. 构建完成 (真)

这回是真的构建完成了,我们进行打包webpack。之后运行index.html,可以看见HelloWorld!啦。

3. iView

关于 iView…这个真的有点复杂,因为官方文档的原因…我目前的水平还说不清。
目前我使用了脚手架工具进行构建。
希望将来的某一天我可以自己动手从 0 开始构建出一个 iView 的页面来!

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    89 引用 • 423 回帖 • 807 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    32 引用 • 120 回帖 • 460 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    140 引用 • 1056 回帖 • 1 关注
感谢    赞同    分享    收藏    关注    反对    举报    ...