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
启动服务器之后,在浏览器输入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开发前端设计教学视频
评论前必须登录!
注册