Vue.js前端开发 + Webpack 实现SPA应用

mac前端开发ie浏览器|前端开发用几寸的mac|学前端还是ios开发

vue.js 1.0 + Webpack 实现SPA应用文档

更新：vue.js已经出到了2.2版本了，因此最新学习可以查看基于vue2做的demo，https://github.com/lin-xin/notepad

一、安装webpack

首先需要先安装好node.js

1.创建项目，在根目录生成package.json文件

mkdir project-name
cd project-name
npm init //生成package.json文件,一直回车就可以

2.安装webpack

npm install -g webpack
npm install -g webpack-dev-server //安装webpack的本地webserver

3.安装项目依赖

webpack只能处理JavaScript，因此需要引进其他loader来处理各种类型的文件，loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如vue、JSX、SASS 或图片。。

css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-laoder：编译写入.vue文件
vue-html-loader：编译vue的template部分
vue-style-loader：编译vue的样式部分
vue-hot-reload-api：webpack对vue实现热替换
babel-core：ES2015编译核心
babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功能
babel-runtime：babel执行环境
webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并

在命令行中输入：

npm install css-loader style-loader –save-dev

在package.json中，主要是devDependencies这个字段有了改变：

“devDependencies”: {
“css-loader”: “^0.23.1”,
“style-loader”: “^0.13.0”,
“webpack”: “^1.12.2”
}

我们可以用一个更加方便的方式进行安装，可以直接在package.json中，添加相应的依赖（如上面的代码），之后的命令行中运行npm intall，它会自动帮我们安装相应的依赖。
我的package.json的代码如下：
json 代码

在命令行执行npm intall之后，就会安装我们需要的loader了。

4.配置webpack.config.js

在根目录下创建webpack.config.js（这个文件需要自己创建的），下面是我的配置

javascript 代码

entry：指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。 当然如果你只有一个入口的话，也可以直接使用双引号”./main.js”
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
注意：配置babel需要创建.babelrc，不可以新建文本.txt再该后缀，应该通过命令行 cd.>.babelrc 新建该文件，再打开文件写入

{ “presets”: [“es2015”, “stage-0”], “plugins”: [“transform-runtime”] }

5.创建项目目录

在根目录新建src文件夹，在src里新建main.js，此时我们的目录结构如下：

| |-src
| | |-main.js
| |-node_modules
| |-webpack.config.js
| |-package.json
| |-.babelrc

二、使用webpack

1.配置好webpack.config.js之后，命令行执行

webpack

则构建成功了，entry入口文件都压缩到指定目录下生成一个文件build.js，index.html引入build即可。然后可以打开index.html看效果。 （每次修改文件之后，都需要再次执行此命令。）

2.webpack-dev-server，一个轻量的node.js express服务器，webpack-dev-server支持两种模式的自动刷新页面：

iframe模式（页面嵌入一个iframe并在其中呈现页面的变化）
inline模式（一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面）
使用iframe模式无需额外的配置，我们可以通过执行命令行

webpack-dev-server

启动服务器之后，在浏览器输入https://www.rokub.com:8080，则可以打开项目了。每次修改完代码只需要刷新浏览器则可。
使用inline模式，我们可以通过执行命令行

webpack-dev-server –inline –hot

修改完在代码之后，不用刷新就可以看到项目改变了。（然而并没什么卵用，data 里面的值是初始值，热更新也不会改变他们，只能刷新。）

三、学习Vue.js 1.0

1.官网：http://cn.vuejs.org/guide/

2.segmentfault：https://segmentfault.com/

3.vue-router 1.0中文文档：http://router.vuejs.org/

四、使用Vue.js实现SPA应用

（注意：vue-router2的写法已经不同）
在我们主要的main.js里

javascript 代码

这样我们路由就配置成功了，在浏览器访问https://www.rokub.com:8080就可以访问到项目的home页面了。嗯，没错，我们还没写组件呢！现在还访问不到的。
下面，我们再来看看组件如何写？

想看吗，请到github下载demo看看吧！下载地址：https://github.com/lin-xin/webpack-vue

macbook 前端开发|web前端开发 js库|php开发前端设计教学视频