这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
随着前端的快速发展,非常多的 js 框架被应用到项目中。Vue.js 本身支持对组件的异步加载, 配合 Webpack 的分块打包功能, 可以极其轻松地实现组件的异步按需加载。 这篇文章是 webpack+vue.j 的入门教程,有需要的可以参考借鉴。
前言
vuejs——轻量、学习成本低、双向绑定、无 dom 的操作、组件的形式编写
vuejs 是个轻量级的 mvvm 框架, 集合了 angular 的基本功能,却又比 angular 更为精简,功能上涵盖了双向绑定、指令、逻辑控制、过滤器、事件监听、函数等。框架的特点使得项目 在状态变更、分页的场景下可以拥有很大的便利——所有的操作只需要变更数组,没有任何的 dom 操作。
webpack——CommonJS 的引用和编写方式、loader 非常的丰富,包括 vue-loader、CSS-loader、less-loader
webpack 是前端组件化的解决方案,webpack 提供了核心的 CommonJS 引用方案去引用资源,下面这篇文章就给大家介绍 webpack 和 vue.js,一起来看看吧。
项目的创建
1. 新建项目文件夹,并在其中建立 package.json
- $ mkdir [project name]
- $ cd [project name]
- $ npm init
2. 在项目目录下新建 index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Vue example
- </title>
- </head>
- <body>
- <div>
- {{message}}
- </div>
- <script src="dist/build.js">
- </script>
- </body>
- </html>
src 文件夹,并在该文件夹下建立 main.js
- import Vue from 'vue'
- new Vue({
- el:'body',
- data:{
- message:'test success!'
- }
- });
设置 webpack
1. 安装 webpack,webpack-dev-server 以及相关的 loaders
- # 全局安装webpack,webpack-dev-server
- $ npm install -g webpack
- $ npm install -g webpack-dev-server
- # 为项目安装其他依赖
- $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D
webpack-merge:开发环境和生产环节的 webpaak 配置文件的配置合并
css-loader:编译写入 css
style-loader:把编译后的 css 整合进 html
file-loader:编译写入文件,默认情况下生成文件的文件名是文件名与 MD5 哈希值的组合
vue:vue 主程序
vue-loader:编译写入. 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 执行环境
url-loader
这里介绍下 url-loader,这个 loader 实际上是对 file-loader 的封装
比如 CSS 文件中有时候会这么写:
- .demo {
- background - image: url('a.png');
- }
- module: {
- loaders: [{
- test: /\.(png|jpg)$/,
- loader: 'url-loader?limit=8192'
- }]
- }
经过以上配置,当 a.png 小于 8K 就会自动将图片转换成 base64 编码,如果不小于,则不会转换。
这里顺便提一句,在 module 配置的时候,loader 的写法:
- module: {
- loaders: [{
- test: /\.jade$/,
- loader: 'jade'
- }
- //这里配置了让webpack识别jade的loader,其他类似,比如.vue
- //用于css文件的loader有两种写法
- {
- test: /\.css$/,
- loader: 'style!css'
- } {
- test: /\.css$/,
- loaders: ['style', 'css']
- }]
- }
2. 配置 webpack.config.js
在根目录下建立 webpack.config.js,配置如下:
- var path = require('path');
- module.exports = {
- entry: './src/main.js',
- //定义webpack输出的文件,我们在这里设置了
- 让打包后生成的文件放在dist文件夹下的build.js文件中
- output: {
- path: './dist',
- publicPath:'dist/',
- filename: 'build.js'
- },
- module: {
- loaders: [
- //转化ES6语法
- {
- test: /\.js$/,
- loader: 'babel',
- exclude: /node_modules/
- },
- //图片转化,小于8K自动转化为base64的编码
- {
- test: /\.(png|jpg|gif)$/,
- loader:'url-loader?limit=8192'
- }
- ]
- },
- //这里用于安装babel,如果在根目录下的.babelrc配置了,这里就不写了
- babel: {
- presets: ['es2015','stage-0'],
- plugins: ['transform-runtime']
- }
- }
特别说明
如果要在. babelrc 下配置 babel,则需要在根目录下新建该文件,windows 环境下,不能新建该 txt 文件然后改后缀,需要通过 dos 命令建立:
- echo>.babelrc
通过该命令就可以建立 babelde 配置文件,用编辑器打开,修改里面的内容为:
- {
- "presets": ["es2015", "stage-0"],
- "plugins": ["transform-runtime"]
- }
完成该配置我们在命令中运行
- $ webpack
打开 index.html 就可以看到浏览器中看到我们刚刚写的文字
总结
至此我们实现了最基本的利用 webpack 打包 vue,大家最好自己实际操作下代码才能更好的理解,希望这篇文章对大家能有所帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0503/331246.html