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/notep……
mac前端开发ie浏览器|前端开发用几寸的mac|学前端还是ios开发
vue.js 1.0 + Webpack 实现SPA应用文档
更新：vue.js已经出到了2.2版本了，因此最新学习可以查看基于vue2做的demo，https://github.com/lin-xin/notepad
一、安装webpack
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
启动服务器之后，在浏览器输入http://localhost: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 代码
这样我们路由就配置成功了，在浏览器访问http://localhost:8080就可以访问到项目的home页面了。嗯，没错，我们还没写组件呢！现在还访问不到的。
下面，我们再来看看组件如何写？
想看吗，请到github下载demo看看吧！下载地址：https://github.com/lin-xin/webpack-vue
macbook 前端开发|web前端开发 js库|php开发前端设计教学视频
近期评论